图像上的黑色透明叠加仅使用CSS悬停？

Question

每当鼠标悬停在只有CSS的图像上时,我就会尝试为图像添加透明的黑色叠加层.这可能吗？我试过这个:

http://jsfiddle.net/Zf5am/565/

但我无法让div出现.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Answer 1

我建议使用伪元素代替overlay元素.因为无法在封闭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;

    /* Other styling.. */
}

这应该适用于大多数情况; 但是,如果您有多个img元素,则可能不希望在悬停时显示相同的文本.因此,您可以在data-*属性中设置文本,因此每个img元素都有唯一的文本.

这里的例子

.image:after {
    content: attr(data-content);
    color: #fff;
}

随着content中值attr(data-content),伪元素添加从文本.image元素的data-content属性:

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

Answer 2

CSS3过滤器

虽然此功能仅在webkit中实现,并且它没有浏览器兼容性,但值得一看:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

JSFiddle演示

参考

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

关于SO的类似主题

• 如何降低CSS中的图像亮度
• 在HTML/CSS中将图像转换为灰度
• 使用CSS3滤镜模糊定义的边缘

Answer 3

你很亲密 这将有效:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

你需要放置:hover图像,并.overlay通过添加right:0;和覆盖整个图像bottom:0.

jsfiddle:http://jsfiddle.net/Zf5am/569/

Answer 4

这是在图像 div 上使用 :after 的好方法，而不是额外的叠加 div：http : //jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}