html - 在 :hover with CSS3 Ease-In Transitions 上显示 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 以使用 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>