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

<<<

.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(.jpg) !important;
    background-size: 140%;
    background-position: center;
}


.main-container-slide:has(.slide2:hover) {
    background-image: url(.jpg) !important;
    background-size: 140%;
    background-position: center;
}


.main-container-slide:has(.slide3:hover) {
    background-image: url(.jpg) !important;
    background-size: 140%;
    background-position: center;
    
}

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/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/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/content/v1/62bdc86f2062bd28d47d3765/1656604785238-91PU6TXHODSGNODFIJWG/06_STILL_LIFE_265_V3_Master_OP2.jpg) !important;
    background-size: 140%;
    background-position: center;
    
}

• css
• background
• hover
• background-image
• transition

• I can't see any fading between slides on that link you provided – CavemanDan Commented Mar 28 at 9:59

1 Answer 1

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:

HTML:

<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>

CSS

.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;
}