在 :hover 上显示 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 which has the :hover working，只是没有动画。

非常感谢

链接：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>