图像上的黑色透明叠加仅使用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元素。

LIVE EXAMPLE HERE - EXAMPLE WITH TEXT

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

对于CSS，在.image元素上设置可选维度，并相对定位它。如果您的目标是响应式图像，只需省略尺寸，这仍然有用(example)。值得注意的是，维度必须位于父元素上，而不是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;
}

END RESULT HERE

---

如果要在悬停时添加文字：

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

EXAMPLE HERE

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

您可以添加一些样式并执行以下操作：

EXAMPLE HERE

在上面的示例中，: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 filter

虽然此功能仅在webkit中实现，但它没有browser compatibility，但值得一看：

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

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

<强> JSFiddle Demo

参考

• 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

上的类似主题

• How to Decrease Image Brightness in CSS
• Convert an image to grayscale in HTML/CSS
• Defined Edges With CSS3 Filter Blur

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没有高度或宽度且没有内容，并且您不能将鼠标悬停在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); }

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一个最小高度和最小宽度，并在悬停时改变背景颜色

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

首先，你永远不会设置叠加层的尺寸，这意味着它首先没有出现。其次，我建议您将鼠标悬停在图像上时更改叠加层的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}