Black transparent overlay on image hover with only CSS?

小开

你差点就成功了，这个会有用的:

.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。

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

小开

.overlay没有高度或宽度，也没有内容，你不能在 display:none上方悬停。

相反，我给了 div 与 .image相同的大小和位置，并改变了悬停时的 RGBA值。

Http://jsfiddle.net/zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

小开

我会给一个最小的高度和最小的宽度为您的叠加 div 的大小的图像，并改变悬停的背景颜色

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}

小开

最佳答案

我建议使用伪元素代替覆盖元素。因为伪元素不能添加到封闭的 img元素上，所以仍然需要包装 img元素。

实例与文本

<div class="image">
<img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

至于 CSS，在 .image元素上设置 可选尺寸，并将其相对定位。如果你的目标是一个响应图像，只要省略的尺寸，这仍然会工作的 < strong > (示例) 。值得注意的是，维度必须在父元素上，而不是 img元素本身 see上。

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

结果出来了

如果要在鼠标悬停时添加文本:

For the simplest approach, just add the text as the pseudo element's content value:

举个例子

.image:after {
content: 'Here is some text..';
color: #fff;


/* Other styling.. */
}

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

EXAMPLE HERE

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

小开

这里有一个很好的方法: 在图像 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);}

小开

看看我做了什么: http://jsfiddle.net/dyarbrough93/c8wEC/

首先，你从来没有设置覆盖的尺寸，这意味着它没有显示在首位。其次，我建议在悬停在图像上时只改变覆盖层的 z-index。更改覆盖层的不透明度/颜色以满足您的需要。

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

小开

您可以通过处理图像的不透明度和将图像的背景颜色设置为黑色来实现这一点。通过使图像透明，它会显得更暗。

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

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

您可能还需要设置特定于浏览器的不透明度，以便在其他浏览器中也能正常工作。

小开

CSS3过滤器

虽然这个特性只在 webkit 中实现，而且它没有浏览器兼容性，但是值得一看:

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


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

JSFiddle 演示

Black transparent overlay on image hover with only CSS?

如果要在鼠标悬停时添加文本:

CSS3过滤器

参考文献

类似的话题