如何将CSS3转换添加到图像叠加？

我想弄清楚如何给一个半透明的图像覆盖（出现在：悬停）一个CSS3过渡（轻松）。但它不起作用。我不确定这是因为我错过了什么，或者如果转换只是不适用于显示属性。任何想法的CSS解决方法（我不知道JavaScript）？提前致谢。如何将CSS3转换添加到图像叠加？

相关的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; 
}

来源

2013-07-31 Bryce Johnson

display属性不能动画（只有两个状态）。但不透明，甚至可见度可以。 –

这可能会帮助你

<div class="tricky"><img class="tricky_image" src="http://distilleryimage11.instagram.com/65c8f832841711e180d51231380fcd7e_7.jpg"></div>

css部分：

.tricky { 
    display:inline-block; 
    max-width:200px; 
    max-height:200px; 
    background:red; 
} 

.tricky_image { 
    max-width:200px; 
    max-height:200px; 
    -moz-transition: all 1s; 
    -webkit-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 

.tricky_image:hover { 
    opacity:0.2; 
    filter:alpha(opacity=20); 
}

来源

2013-07-31 07:12:41 krishna

适用于跨浏览器支持。尽管我也设置了可见性属性。 –

谢谢！正是我需要的！如果我有足够的声望，我会赞成答案:) –

嗨@BryceJohnson - 如果您认为这是最正确的答案，那么将其标记为已接受。点击此处查看更多信息：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work#answer-5235 – 3dgoo

，我看到那是因为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; 
}

希望它帮助！

来源

2013-07-31 06:11:56

它正在为我，我分隔的CSS到另一个文件，并将其链接到HTML file.It的作品很好，我

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>

CSS

.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; 
     }

来源

2013-07-31 06:12:53

这只适用于“展示”动画，而不适用于“隐藏”动画... –

如何将CSS3转换添加到图像叠加？

回答

相关问题