如何使CSS叠加在图像上？

我正试图达到这样的事情：

当我将鼠标hover在图像上时，我想用一些文字和图标将这个图像放在这个深色的图像上。

我被困在这里。 我发现了一些教程，但他们没有为这个案件工作。 另外，另一个问题 – 每个图像都有不同的高度。 宽度始终相同。

这个效果如何实现？

Answer 1

你可以用这个简单的CSS / HTML来实现：

.image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } 

HTML

 <div class="image-container"> <img src="http://lorempixel.com/300/200" /> <div class="after">This is some content</div> </div> 

演示： http : //jsfiddle.net/6Mt3Q/

---

UPD ：这是一个不错的最后的演示与一些额外的样式。

 .image-container { position: relative; display: inline-block; } .image-container img {display: block;} .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } .image-container .after .content { position: absolute; bottom: 0; font-family: Arial; text-align: center; width: 100%; box-sizing: border-box; padding: 5px; } .image-container .after .zoom { color: #DDD; font-size: 48px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -19px; height: 50px; width: 45px; cursor: pointer; } .image-container .after .zoom:hover { color: #FFF; } 

 <link href="font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/> <div class="image-container"> <img src="http://lorempixel.com/300/180" /> <div class="after"> <span class="content">This is some content. It can be long and span several lines.</span> <span class="zoom"> <i class="fa fa-search"></i> </span> </div> </div> 

Answer 2

你可以使用一个伪元素为此，并hover你的形象：

 .image { position: relative; height: 300px; width: 300px; background: url(http://lorempixel.com/300/300); } .image:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 0.8s; opacity: 0; background: url(http://lorempixel.com/300/200); background-size: 100% 100%; } .image:hover:before { opacity: 0.8; } 

 <div class="image"></div> 

Answer 3

有点迟了，但是这个线程在谷歌search覆盖方法时，作为最好的结果。

你可以简单地使用background-blend-mode

 .foo { background-image: url(images/image1.png), url(images/image2.png); background-color: violet; background-blend-mode: screen multiply; } 

它所做的就是拍摄第二张图像，然后使用多重混合模式将其与背景色混合，然后使用混合模式将第一张图像与第二张图像和背景色混合。 有16种不同的混合模式，你可以用来实现任何覆盖。

乘法，屏幕，叠加，变暗，变亮，变色，变色，强光，柔光，差异，排除，色相，饱和度，颜色和光度。