黑色透明覆盖图片悬停与只有CSS？ [英] Black transparent overlay on image hover with only CSS?
问题描述
每当鼠标悬停在图片上方时，我只是尝试为图片添加透明的黑色叠加层。这可能吗？我尝试过：
http://jsfiddle.net/Zf5am/565/
但我无法看到div显示。
< div class =image>
< img src =http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpgalt =/>
< 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;
}
伪元素代替覆盖元素。因为伪元素不能添加在封闭的 img 元素上，所以您仍然需要包装 img 元素。
< div class =image>
< img src =http://i.stack.imgur.com/Sjsbh.jpgalt =/>
< / div>
对于CSS，请在<$ c $上设置可选尺寸 c> .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％;高度：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 {
不透明度：1;
}
如果要在悬停时添加文字：
对于最简单的方法，只需将文本添加为伪元素的 content 值：
.image：after {
content：'这里是一些文本..';
color：#fff;
/ *其他样式.. * /
}
在大多数情况下，应该工作;但是，如果您有多个 img 元素，则可能不希望在悬停时显示相同的文本。因此，您可以在 data - * 属性中设置文本，因此每个 img 元素都有唯一的文本。 p>
.image：after {
content：attr（data-content）;
color：#fff;
}
使用内容值 attr（data-content），伪元素添加 .image 元素的 data-content 属性：
< div data-content = class =image>
< img src =http://i.stack.imgur.com/Sjsbh.jpgalt =/>
< / 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％;高度：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;
}
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:
http://jsfiddle.net/Zf5am/565/
But I can't get the div to show up.
<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;
}
I'd suggest using a pseudo element in place of the overlay element. Because pseudo elements can't be added on enclosed img elements, you would still need to wrap the img element though.
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 dimensions on the .image element, 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 img element itself, see.
.image {
position: relative;
width: 400px;
height: 400px;
}
Give the child img element a width of 100% of the parent and add vertical-align:top to fix the default baseline alignment issues.
.image img {
width: 100%;
vertical-align: top;
}
As for the pseudo element, set a content value and absolutely position it relative to the .image element. A width/height of 100% will ensure that this works with varying img dimensions. If you want to transition the element, set an opacity of 0 and add the transition properties/values.
.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 1 when hovering over the pseudo element in order to facilitate the transition:
.image:hover:after {
opacity: 1;
}
If you want to add text on hover:
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.. */
}
That should work in most instances; however, if you have more than one img element, 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 img element.
.image:after {
content: attr(data-content);
color: #fff;
}
With a content value of attr(data-content), the pseudo element adds the text from the .image element's data-content attribute:
<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:
In the above example, the :after pseudo element serves as the black overlay, while the :before pseudo element is the caption/text. Since the elements are independent of each other, you can use separate styling for more optimal positioning.
.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;
}
这篇关于黑色透明覆盖图片悬停与只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
