黑色透明覆盖图像hover只有CSS？

我试图添加一个透明的黑色覆盖图像，只要鼠标hover在图像上只有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

我build议使用伪元素来代替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来修复默认的基线alignment问题。

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

将鼠标hover在伪元素上时，使用不透明度为1以便于转换：

 .image:hover:after { opacity: 1; } 

END RESULT HERE

---

如果你想添加文字hover：

对于最简单的方法，只需添加文本作为伪元素的content值：

在这里的例子

 .image:after { content: 'Here is some text..'; color: #fff; /* Other styling.. */ } 

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

在这里的例子

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

使用attr(data-content)的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伪元素: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

CSS3filter

虽然这个function只在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之后，而不是额外的叠加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);} 

Answer 5

.overlay没有高度或宽度，也没有内容，并且您无法将鼠标hover在display:none 。

我反而给了div与.image相同的大小和位置，并改变了hover时的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); } 

Answer 6

您可以通过播放图像的不透明度并将图像的背景色设置为黑色来完成此操作。 通过使图像透明，它会显得较暗。

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

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

Answer 7

我会给你的图像的大小覆盖div的最小高度和最小宽度，并更改hover的背景颜色

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

Answer 8

看看我在这里做了什么： http : //jsfiddle.net/dyarbrough93/c8wEC/

首先，你从来没有设置覆盖层的尺寸，这意味着它并没有摆在首位。 其次，我build议只要将鼠标hover在图像上，就可以更改叠加层的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}