Black transparent overlay on image hover with only CSS?
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;
}
END RESULT HERE
If you want to add text on hover:
For the simplest approach, just add the text as the pseudo element's content
value:
EXAMPLE HERE
.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.
EXAMPLE HERE
.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:
EXAMPLE HERE
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;
}
How can i add an overlay to an image in css or any other way
Here's one simple method, using a pseudo-element (::before
) with a semi-transparent background (black with 50% opacity, defined by rgba
) overlayed above an image.
.dark-img { position: relative; width: 300px;}
.dark-img img { display: block; width: 100%;}
.dark-img::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(0, 0, 0, .5);}
<div class="dark-img"> <img src="https://i.imgur.com/qLRD0OC.jpg" /></div>
How to create a dark fade + text on image hover?
You should use a seperate element for the overlay, in my example a child element. Only the hover status is visible, the regular status isn't, due to opacity: 0
.thumbnail { background-image: url(https://placehold.it/450x400/fa0); height: 400px; width: 450px;}.overlay { background: rgb(0, 0, 0); height: 400px; width: 450px; opacity: 0; transition: 0.8s;}.thumbnail:hover .overlay { opacity: 0.5;}
<div class="thumbnail"><div class="overlay"> </div> </div>
How to make a transparent overlay on image
Take a look at following fiddle. I hope it can help.
http://jsfiddle.net/somy_taheri/93y6hwjk/1/
<html>
<div class="outer">
<img src="http://placekitten.com/g/200/300">
<div class="overlay">
<p class="text">x</p>
</div>
</div>
</html>
<style>
.outer {
position:relative;
width: 200px;
height: 300px;
}
.overlay {
display: none;
}
.outer:hover .overlay {
display: block;
position: absolute;
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
top: 0;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%);
color:white;
}
</style>
Related Topics
Truncating Long Strings With Css: Feasible Yet
Internet Explorer'S CSS Rules Limits
Which CSS Properties Are Inherited
How to Prevent CSS Inheritance
Prevent Body Scrolling But Allow Overlay Scrolling
Css Units - Difference Between Vh/Vw and %
Responsive CSS Background Images
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
Pure CSS Checkbox Image Replacement
Left Aligned Last Row in Centered Grid of Elements
Error: Css: Background:/Is an Incorrect Operator
Does the Order of Classes Listed on an Item Affect the Css
How to Make a Floated Div 100% Height of Its Parent
How to Transition Height: 0; to Height: Auto; Using Css
How to Disable Text Selection Highlighting