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

Question

提问by RobVious

I'm trying to add a transparent black overlay to an image whenever the mouse is hovering over the image with only CSS. Is this possible? I tried this:

每当鼠标悬停在仅使用 CSS 的图像上时，我都会尝试向图像添加透明的黑色叠加层。这可能吗？我试过这个：

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

But I can't get the div to show up.

但我无法让 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

回答by Josh Crozier

I'd suggest using a pseudo element in place of the overlay element. Because pseudo elements can't be added on enclosed imgelements, you would still need to wrap the imgelement though.

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

LIVE EXAMPLE HERE-- EXAMPLE WITH TEXT

现场示例- 带文本的示例

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

As for the CSS, set optional dimensionson the .imageelement, and relatively position it. If you are aiming for a responsive image, just omit the dimensions and this will still work (example). It's just worth noting that the dimensions must be on the parent element as opposed to the imgelement itself, see.

至于CSS，在元素上设置可选尺寸.image，并相对定位。如果您的目标是响应式图像，只需省略尺寸，这仍然有效（示例）。值得注意的是，尺寸必须在父元素上，而不是在img元素本身上，请参阅。

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

Give the child imgelement a width of 100%of the parent and add vertical-align:topto fix the default baseline alignment issues.

为子img元素提供100%父元素的宽度并添加vertical-align:top以修复默认基线对齐问题。

.image img {
    width: 100%;
    vertical-align: top;
}

As for the pseudo element, set a content value and absolutely position it relative to the .imageelement. A width/height of 100%will ensure that this works with varying imgdimensions. If you want to transition the element, set an opacity of 0and add the transition properties/values.

至于伪元素，设置一个内容值并相对于.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;
}

Use an opacity of 1when hovering over the pseudo element in order to facilitate the transition:

将鼠标1悬停在伪元素上时使用不透明度以促进过渡：

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

END RESULT HERE

最终结果在这里

If you want to add text on hover:

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

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

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

EXAMPLE HERE

示例在这里

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

    /* Other styling.. */
}

That shouldwork in most instances; however, if you have more than one imgelement, you might not want the same text to appear on hover. You could therefore set the text in a data-*attribute and therefore have unique text for every imgelement.

这应该在大多数情况下有效；但是，如果您有多个img元素，您可能不希望悬停时出现相同的文本。因此，您可以在data-*属性中设置文本，因此每个img元素都有唯一的文本。

EXAMPLE HERE

示例在这里

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

With a contentvalue of attr(data-content), the pseudo element adds the text from the .imageelement's data-contentattribute:

随着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>

You can add some styling and do something like this:

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

EXAMPLE HERE

示例在这里

In the above example, the :afterpseudo element serves as the black overlay, while the :beforepseudo element is the caption/text. Since the elements are independent of each other, you can use separate styling for more optimal positioning.

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

回答by Hashem Qolami

CSS3 filter

CSS3 过滤器

Although this feature is only implemented in webkit, and it doesn't have browser compatibility, but It's worth taking a look at:

虽然这个功能只在webkit中实现，并且不具备浏览器兼容性，但是值得一看：

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

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

JSFiddle Demo

JSFiddle 演示

References

参考

SO 上的类似主题

Answer 3

回答by david

You were close. This will work:

你很接近。这将起作用：

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

You needed to put the :hoveron image, and make the .overlaycover the whole image by adding right:0;and bottom:0.

您需要放置:hover图像，并.overlay通过添加right:0;和使整个图像成为封面bottom:0。

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

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

Answer 4

回答by andi

Here's a good way using :after on the image div, instead of the extra overlay div: http://jsfiddle.net/Zf5am/576/

这是在图像 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);}

Answer 5

回答by Andrew Clody

.overlaydidn't have a height or width and no content, and you can't hover over display:none.

.overlay没有高度或宽度，也没有内容，您不能将鼠标悬停在display:none.

I instead gave the div the same size and position as .imageand changes RGBAvalue on hover.

我改为给 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

回答by Sumurai8

You can accomplish this by playing with the opacity of the image and setting the background color of the image to black. By making the image transparent, it will appear darker.

您可以通过调整图像的不透明度并将图像的背景颜色设置为黑色来实现此目的。通过使图像透明，它会显得更暗。

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

CSS:

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 }

You might need to set the browser-specific opacity too to make this work in other browsers too.

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

Answer 7

回答by Davis Yarbrough

See what I've done here: http://jsfiddle.net/dyarbrough93/c8wEC/

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

First off, you never set the dimensions of the overlay, meaning it wasn't showing up in the first place. Secondly, I recommend just changing the z-index of the overlay when you hover over the image. Change the opacity / color of the overlay to suit your needs.

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

Answer 8

回答by Jako

I would give a min-height and min-width to your overlay div of the size of the image, and change the background color on hover

我会给你的图像大小的叠加 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;}

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

提问by RobVious

回答by Josh Crozier

If you want to add text on hover:

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

回答by Hashem Qolami

CSS3 filter

CSS3 过滤器

References

参考

Similar topics on SO

SO 上的类似主题

回答by david

回答by andi

回答by Andrew Clody

回答by Sumurai8

回答by Davis Yarbrough

回答by Jako

相关推荐

最近更新

标签

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

提问by RobVious

回答by Josh Crozier

If you want to add text on hover:

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

回答by Hashem Qolami

CSS3 filter

CSS3 过滤器

References

参考

Similar topics on SO

SO 上的类似主题

回答by david

回答by andi

回答by Andrew Clody

回答by Sumurai8

回答by Davis Yarbrough

回答by Jako

相关推荐

CSS 在 twitter-bootstrap 中居中模式

CSS 如何在 IE 上显示 CSS3 列？

CSS Twitter Bootstrap 导航导航标签在点击时不会改变

CSS CSS并排div的自动等宽

相关推荐

最近更新

标签