admin 管理员组

文章数量: 1086019

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
Share Improve this question edited Mar 27 at 16:02 gre_gor 6,75011 gold badges74 silver badges89 bronze badges asked Mar 27 at 12:26 MelissaMelissa 112 bronze badges 1
  • I can't see any fading between slides on that link you provided – CavemanDan Commented Mar 28 at 9:59
Add a comment  | 

1 Answer 1

Reset to default 0

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

本文标签： cssBackground smooth fade on hoverStack Overflow

版权声明：本文标题：css - Background smooth fade on hover - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744089724a2531805.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。