我建议使用伪元素替换遮罩层元素。因为伪元素不能添加到包含的 img
元素上,所以您仍需要将 img
元素包装起来。
此处是实时示例 -- 此处是带文本的示例
<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
关于CSS,需要在.image
元素上设置可选的尺寸,并将其相对定位。如果你想要一个响应式图片,只需省略尺寸即可,这仍然有效(示例)。值得注意的是,尺寸必须在父元素上而不是img
元素本身中设置,请参见。
.image {
position: relative;
width: 400px;
height: 400px;
}
给子元素img
设置宽度100%
,并添加vertical-align:top
以解决默认对齐问题。
.image img {
width: 100%;
vertical-align: top;
}
伪元素方面,设置一个内容值并将其绝对定位相对于.image
元素。宽度/高度为100%
将确保此功能与不同的img
尺寸一起使用。如果想要过渡元素,请设置0
的不透明度并添加过渡属性/值。
.image:after {
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
}
当悬停在伪元素上时,使用不透明度1
以促进过渡效果:
.image:hover:after {
opacity: 1;
}
在这里查看最终结果
如果您想要在悬停时添加文本:
对于最简单的方法,只需将文本作为伪元素的content
值添加即可:
在这里查看示例
.image:after {
content: 'Here is some text..';
color: #fff;
}
那在大多数情况下应该有效;但是,如果您有不止一个img
元素,则可能不希望相同的文本在悬停时出现。因此,您可以将文本设置在data-*
属性中,从而为每个img
元素设置唯一的文本。
这里有示例
.image:after {
content: attr(data-content);
color: #fff;
}
使用attr(data-content)
作为content
属性的值,伪元素将会添加来自具有data-content
属性的.image
元素的文本内容:
<div data-content="Text added on hover" class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>
你可以添加一些样式,并像这样做:
这里有个例子
在上面的示例中,:after
伪元素用作黑色遮罩层,而 :before
伪元素则是标题/文本。由于这些元素是相互独立的,因此您可以使用单独的样式来获得更优化的定位。
.image:after, .image:before {
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content: '\A';
width: 100%; height:100%;
top: 0; left:0;
background:rgba(0,0,0,0.6);
}
.image:before {
content: attr(data-content);
width: 100%;
color: #fff;
z-index: 1;
bottom: 0;
padding: 4px 10px;
text-align: center;
background: #f00;
box-sizing: border-box;
-moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
opacity: 1;
}