Html 如何将CSS3转换添加到图像覆盖？_Html_Css

Html 如何将CSS3转换添加到图像覆盖？

html css

Html 如何将CSS3转换添加到图像覆盖？,html,css,Html,Css,我试图弄明白如何给半透明图像覆盖（显示在：hover上）一个CSS3转换（ease）。但它不起作用。我不确定这是因为我遗漏了什么，还是因为转换不适用于display属性。有没有CSS解决方案的想法（我不知道JavaScript）？提前谢谢相关HTML和CSS： <div class="thumbnail"> <figure> <img src="images/dude.jpg" alt=""/> </figure>

我试图弄明白如何给半透明图像覆盖（显示在：hover上）一个CSS3转换（ease）。但它不起作用。我不确定这是因为我遗漏了什么，还是因为转换不适用于display属性。有没有CSS解决方案的想法（我不知道JavaScript）？提前谢谢

相关HTML和CSS：

<div class="thumbnail">
    <figure>
        <img src="images/dude.jpg" alt=""/>
    </figure>
    <div class="thumbnail-overlay">
        <h2>Project Name</h2>
        <h3> Skills Skills Skills</h3>
        <p>This is a project description.</p>
    </div>
</div>

.thumbnail {
   position:relative;
   float:left;
   width:40%;
   margin:1.5% 1.5% 0 0;
}

.thumbnail-overlay {
   background-color: @dark-gray;
   display:none;
   opacity:.9;
   position:absolute;
   top:0;
   left:0;
   width:100%; height:100%;
   overflow:hidden;
   -webkit-transition:all .3s ease;
   -moz-transition:all .3s ease;
   transition:all.3s ease;
}


.thumbnail:hover .thumbnail-overlay {
   display:block;
}


项目名称
技能
这是一个项目描述
.缩略图{
位置：相对位置；
浮动：左；
宽度：40%；
利润率：1.5%1.5%0；
}
.缩略图覆盖{
背景色：@深灰色；
显示：无；
不透明度：.9；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；高度：100%；
溢出：隐藏；
-webkit过渡：所有.3s轻松；
-moz过渡：全部.3s轻松；
过渡：全部3秒轻松；
}
.缩略图：悬停.缩略图覆盖{
显示：块；
}

在我看来，这是因为display属性。css转换不能很好地使用它，这就是为什么会出现这个问题

这是我测试过的css代码，工作正常：

.thumbnail .thumbnail-overlay {
background-color: @dark-gray;
display:block;
opacity:0;
position:absolute;
top:0;
left:0;
width:100%; height:100%;
overflow:hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.thumbnail:hover .thumbnail-overlay {
opacity: .9;
}

希望对你有帮助

它对我有用。我将CSS分离到另一个文件，并将其链接到HTML文件。它对我很有用

HTML

无法设置显示属性的动画（只有两种状态）。但是不透明度甚至可见性都可以。

    <head>
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <div class="thumbnail">
        <figure>
            <img src="/home/qbadmin/Downloads/Pic.jpg" alt=""/>
        </figure>
    <div class="thumbnail-overlay">
        <h2>Project Name</h2>
        <h3> Skills Skills Skills</h3>
        <p>This is a project description.</p>
    </div>
</div>

    .thumbnail {
      position:absolute;
      float:left;
      width:40%;
      left :100 px;
      top :100px;
      margin:1.5% 1.5% 0 0;
      }

     .thumbnail-overlay {
     background-color: @dark-gray;
     display:none;
     opacity:.9;
     position:absolute;
     top:100px;
     left:100px;
     width:100%; height:100%;
     overflow:hidden;
     -webkit-transition:all .3s ease;
     -moz-transition:all .3s ease;
      transition:all.3s ease;
      }

     .thumbnail:hover .thumbnail-overlay {
      display:block;
      opacity: .9;
       }