显示 div 叠加在 :使用 CSS3 缓入过渡悬停

Question

我已经在：hover上覆盖了。但是，我想使用 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，它有：hover工作，只是没有动画。

非常感谢

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

Answer 1

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

查看它的工作原理：

.item {
  position: relative;
  background-color: white;
}
.overlay {
  background: white;
  position: absolute;
  opacity: 0;
  -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; 
  transition: background-color 2s ease-in, opacity 2s ease-in; 
 }
.item:hover .overlay{
   background-color: black;
   opacity: 1;
  -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; 
  transition: background-color 2s ease-in, opacity 2s ease-in; 
}

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