@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">♠<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">♣<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">♥<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>