I try to achieve that background images are shown smoothly on hover. The background image should fade in when hovering over one of the inserted divs.
The background is already changing the right way when the mouse is moving from one div to the other. But when arriving from outside the divs, it's just appearing without fading. Why?
Have a look at https://letterleben.de/letterleben-startseite
<<<
.main-container-slide [class*="slide"]:hover {
background-color: #66666600;
}
.main-container-slide {
-webkit-transition: background-image 1s ease-in-out !important;
transition: background-image 1s ease-in-out !important;
background-size: 100%;
}
.main-container-slide:has(.slide1:hover) {
background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785238-91PU6TXHODSGNODFIJWG/06_STILL_LIFE_265_V3_Master_OP2.jpg) !important;
background-size: 140%;
background-position: center;
}
.main-container-slide:has(.slide2:hover) {
background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785552-UTV7TX16STHKH4LWGBHO/1509-08g-01_Watches_Details_0105-RGB.jpg) !important;
background-size: 140%;
background-position: center;
}
.main-container-slide:has(.slide3:hover) {
background-image: url(https://images.squarespace-cdn.com/content/v1/62bdc86f2062bd28d47d3765/1656604785238-91PU6TXHODSGNODFIJWG/06_STILL_LIFE_265_V3_Master_OP2.jpg) !important;
background-size: 140%;
background-position: center;
}
The background image is only applied to the element when the :hover
pseudo class is engaged. Fading it in is not a problem but as soon as :hover
is removed there is no image to fade out.
I'm no expert but I would attempt to achieve this with three elements that have background-image
set and instead of transitioning the background-image
attribute I would transition: opacity
and add and remove it as and when the :hover
class is triggered.
[EDIT] How about this:
<div class="main-container-slide">
<p class="menuItem caption1">DESIGN</p>
<p class="menuItem caption2">PAPIER</p>
<p class="menuItem caption3">KUNST</p>
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
.main-container-slide {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
height: 100%;
background-color: #53c75d;
}
.menuItem {
position: relative;
color: #fff;
padding: 0.25rem;
margin: 1rem auto;
width: 50%;
text-align: center;
z-index: 2;
font-weight: 600;
}
.slide {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s;
background-repeat: no-repeat;
background-size: cover;
}
.slide1 {
background-image: url(https://picsum.photos/200/200);
}
.slide2 {
background-image: url(https://picsum.photos/201/200);
}
.slide3 {
background-image: url(https://picsum.photos/202/200);
}
.main-container-slide:has(.caption1:hover)>.slide1 {
opacity: 1;
}
.main-container-slide:has(.caption2:hover)>.slide2 {
opacity: 1;
}
.main-container-slide:has(.caption3:hover)>.slide3 {
opacity: 1;
}