使用 CSS3 缓入过渡在 :hover 上显示 Div 叠加

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 更改为使用displayor吗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>