jak podmienić zdjęcie i podpis po najechaniu przycisku "jak w ASUS"

pytanie zadane 10 listopada 2023 w HTML i CSS przez Hary-86 Obywatel (1,630 p.)

jak podmienić zdjęcie i podpis po najechaniu przycisku "jak w ASUS": (może jakaś wytczka w wordpress?)

https://www.asus.com/pl/motherboards-components/motherboards/prime/prime-b450-plus/

2 odpowiedzi

odpowiedź 11 listopada 2023 przez VBService Ekspert (253,420 p.)
edycja 11 listopada 2023 przez VBService

@reaktywny;

Wyczytałem, że można tego dokonać z poziomu CSS.

Tu jest dobry przykład:
https://sirv.com/help/articles/hover-change-image/

ten przykład pokazuje :hover tylko na obrazku a OP pyta o

@Hary-86;

jak podmienić zdjęcie i podpis po najechaniu przycisku

przykład tylko css [ kod on-line ]

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 90vw;
  height: 80vh;
  margin: 1rem auto;

  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  background-color: black;
  padding-right: 1rem;
}
span.icon {
  display: block;
  font: bold 1.6rem/1.2 system-ui, monospace;
  height: 3rem;
  padding: .75rem .75rem 0 .75rem;
  margin-top: 1rem;
  text-align: center;
  border-radius: 50%;
  cursor: help;
  color: gray;
  transition: all 250ms;
}
span.icon span {
  font-size: 50%;
  font-weight: normal;
}
span.icon:hover {
  background-color: hsl(0 10% 20%);
  color: white;
}
span.icon:hover + img,
span.icon:hover + img + span.desc {
  opacity: 1;
  z-index: 99;
}
img {
  position: absolute;
  left: 0;
  opacity: 0;
  transition: opacity 250ms;
  width: max(300px, 45vw);
  height: 80vh;
  object-fit: content; /* lub cover */
  object-position: center;
  z-index: 1;
}
img:first-child {
  opacity: 1;
}
span.desc {
  position: absolute;
  bottom: 0;
  right: 0;
  width: max(100px, 40vw);
  height: 4.5rem;
  font: 400 1rem/1.1 system-ui, monospace;
  padding: 1rem;
  background-color: darkblue;
  color: white;
  opacity: 0;
  transition: opacity 250ms;
}
span.desc::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-25%);
  left: -15px;
  margin-top: -7.5px;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 20px solid darkblue;
}

<div class="container">
  <img src="https://picsum.photos/400/200?random=100">

  <span class="icon">&spades;<br><span>Lorem 1</span></span>
  <img src="https://picsum.photos/400/200?random=1">
  <span class="desc">
    Lorem ipsum 1, lorem ipsum 1 1111 111 111. Ipsum 1 1111111 11 11111.
  </span>

  <span class="icon">&clubs;<br><span>Lorem 2</span></span>
  <img src="https://picsum.photos/400/200?random=2">
  <span class="desc">
    Lorem ipsum 2, lorem ipsum 2 2222 222 222. Ipsum 2 2222222 22 22222.
  </span>

  <span class="icon">&hearts;<br><span>Lorem 3</span></span>
  <img src="https://picsum.photos/400/200?random=3">
  <span class="desc">
    Lorem ipsum 3, lorem ipsum 3 3333 333 333. Ipsum 3 3333333 33 33333.
  </span>
</div>

komentarz 11 listopada 2023 przez reaktywny Nałogowiec (41,050 p.)

Fajny przykłąd!

Do czego jest ten kod (w wersji on-line):

console.clear();
  const a = '446 204'.replaceAll(' ','');
  const b = '326 331'.replaceAll(' ','');
  console.log(+a - +b);

???

1	komentarz 11 listopada 2023 przez VBService Ekspert (253,420 p.) A to testowałem do czegoś innego zapis ze znakiem + zamiast parseInt() i zapomniałem usunąć.

komentarz 11 listopada 2023 przez VBService Ekspert (253,420 p.)

@reaktywny, sprawdź

console.clear();
let a = '446 204';
let b = '326 331';

console.info('a: ' + a, 'b: ' + b);
console.warn('a - b: ' + (a - b));
console.warn('a + b: ' + (a + b));

a = a.replaceAll(' ','');
b = b.replaceAll(' ','');

console.log(+a - +b);
console.log(parseInt(a) - parseInt(b));

komentarz 11 listopada 2023 przez reaktywny Nałogowiec (41,050 p.)
edycja 11 listopada 2023 przez reaktywny

OK doczytałem post powyżej.

odpowiedź 10 listopada 2023 przez reaktywny Nałogowiec (41,050 p.)
edycja 10 listopada 2023 przez reaktywny

<img src="1.jpg" onmouseover="hover(this);" onmouseout="hoverOut(this); "/>

// -------------------------------------

function hoverOut(img) {
 img.src = "1.jpg" 
}

function hover(img)
{
 img.src = "2.jpg"
}

Jak będziesz się chciał zająć czymś bardziej poważnym to polecam Svelte (oraz SvelteKIt).

komentarz 10 listopada 2023 przez VBService Ekspert (253,420 p.)

Na dzień dzisiejszy nie jest dobrą praktyką programowania odwoływanie się do funkcji za pomocą atrybutów event-ów (w tym przypadku onmouseover, onmouseout) z poziomu kodu html, a jeżeli już, to można też to zapisać np. tak

<img src="1.jpg" alt=""
     onmouseover="this.src='1_hover.jpg'"                                                     
     onmouseout="this.src='1.jpg'"
/>