Question

我有叠加功能：悬停。但是我想使用CSS3添加一个轻松过渡。似乎无法在线找到合适的版本。

代码！

所以我有一个只包含图像的div。当我将鼠标悬停在它上面时，它会显示一个带有2个文本元素的彩色叠加层。

<div class="item">
     <img src="assets/images/blah.jpg" class="image">
         <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
              <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
            </div>
         </a>
</div>

对于我的CSS，我添加了-transition代码：

.item {
  position: relative;
  background-color: white;
  -webkit-transition: background-color 2s ease-in; 
  transition: background-color 2s ease-in; 
}

.overlay {
  background: white;
  position: absolute;
  display: none;
 }

.item:hover .overlay{
   display:block;
   background-color: black;
}

但是这种过渡效果不起作用！请帮忙！

我是否需要更改-transition以使用display或all？

我有jsfiddle which has the :hover working，没有动画。

非常感谢

链接：https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/

Answer 1

例如，您必须使用不透明度更改显示，并将过渡添加到叠加层，而不是项目。

看到它起作用：

<div class="item">
     <img src="assets/images/blah.jpg" class="image">
         <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
              <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
            </div>
         </a>
</div>

{{1}}

显示Div Overlay：使用CSS3 Ease-In Transitions悬停

1 个答案: