Html 显示Div覆盖：在CSS3轻松过渡时悬停

我有覆盖工作：悬停。不过，我想使用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>

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

是否需要将-transition更改为使用

display

或

all

我有一个，只是没有动画

非常感谢

---

链接：

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

看到它工作了吗

.item{
位置：相对位置；
背景色：白色；
}
.覆盖{
背景：白色；
位置：绝对位置；
不透明度：0；
-webkit过渡：背景色2缓进，不透明度2缓进；
过渡：背景色2缓变，不透明度2缓变；
}
.项目：悬停.覆盖{
背景色：黑色；
不透明度：1；
-webkit过渡：背景色2缓进，不透明度2缓进；
过渡：背景色2缓变，不透明度2缓变；
}

---

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

看到它工作了吗

.item{
位置：相对位置；
背景色：白色；
}
.覆盖{
背景：白色；
位置：绝对位置；
不透明度：0；
-webkit过渡：背景色2缓进，不透明度2缓进；
过渡：背景色2缓变，不透明度2缓变；
}
.项目：悬停.覆盖{
背景色：黑色；
不透明度：1；
-webkit过渡：背景色2缓进，不透明度2缓进；
过渡：背景色2缓变，不透明度2缓变；
}

显示

不是可转换属性。您正在将其从悬停状态下的

none

更改为

block

，因此它将永远不会转换。谢谢各位！这是有道理的。我认为display:block正在杀死它

display

不是一个可转换的属性。您正在将其从悬停状态下的

none

更改为

block

，因此它将永远不会转换。谢谢各位！这是有道理的。我想display:block要杀了它Hanks Marcos，为什么我需要声明-转换两次？第一次是在鼠标左移时进行转换，第二次是在鼠标右移时进行转换。如果删除第一个过渡，您将只在鼠标悬停时看到过渡，而在鼠标悬停时看不到过渡。啊，是的，前后移动-实际上看起来更好。也许您想添加

可见性：隐藏
后的位置
显示：无
，以避免在覆盖上悬停。@Xsmael是的，它正在运行感谢Marcos，为什么我需要声明两次-transitions？第一次是在鼠标左移时进行转换，第二次是在鼠标右移时进行转换。如果删除第一个转换，您将只在鼠标悬停时看到转换，而在鼠标悬停时看不到转换。啊，是的，输入和输出-实际上看起来更好。也许您想添加
可见性：隐藏
后的位置
显示：无
，以避免鼠标悬停在覆盖上。@Xsmael是的，它正在运行
.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;
}