Easy CSS-only Image Description Hover
Look, Ma! No jQuery!
Recently, I was asked what jQuery plugin would be best for creating an overlay on an image that would show when the image is hovered. Truth be told, the effect is incredibly easy to accomplish using only CSS. This works in IE 8 and up, as well as Chrome and Firefox.
The HTML
<div class="img-wrap">
<img src="images/snowman.png" alt="" />
<div class="img-overlay">
<h4>Title</h4>
<p>A description of the image</p>
</div>
</div>
The HTML is fairly straightforward. The image and the text we want are wrapped in a div. The wrapper is used to contain everything and give the overlay a boundary to work with.
The CSS
.img-wrap{
height:314px;
overflow:hidden;
position:relative;
width:300px;
}
.img-overlay{
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
The img-wrap class is set to the height and width of the image. That will keep the overlay contained to the width of the image. We’ll also set the position to relative so we can position the overlay within it. While it won’t necessarily help with a simple fade-in effect like we’re doing here, setting overflow:hidden; will keep things from bleeding over.
The img-overlay class positioning is set to absolute, and bottom offset to 0. That will peg the overlay to the bottom of the wrapper div. If you prefer the overlay show at the top, simply replace bottom with top. The opacity is set to 0 to hide the div. For Internet Explorer versions below 9, use the filter: alpha(opacity = 0);.
Making the Magic
The stage is set. Now for the simple hover effect. What we want to do is apply opacity to the overlay when the wrap is hovered. This is done using .img-wrap:hover .img-overlay. Now, apply your desired opacity level and a transition if desired.
That’s all there is to it! Other effects can be accomplished by playing with the positioning values. For instance, the overlay could be positioned off screen using a negative offset value, and then set to 0 for a slide-up effect.
.img-wrap:hover .img-overlay
What if I don’t want it to appear on “hover,” but want it to be visible all of the time?
Thanks
In that case, you would just set the initial opacity to 0.75, and leave off the :hover declaration.
It works and it’s awesome! Thank you so, so much! Lots of kudos for you!
Thank you so much for this! You just saved my butt and saved me hours of experimentation!
This is awesome! How do you get the transparency to cover the entire image though?
That’s as easy as setting the height of the overlay to 100%
works perfectly, but what if i want the half-transparent black to cover the whole image? what should i change? tnx 🙂
wait, no nevermind, got it!
we have some work for you but before this we need to finish one problems.
The problem is i need to create the one two images on runtime and one block where the corresponding image description is shown.
after this the one block of two image and description block will be created again
Hi Ron,
I have several different div classes. Example: div class”largewide”, div class” smalltall. I have it like this, because of the different sizes of photos I have. I used your coding one of the div classes and it works perfect, but it doesn’t work for others and I separated them in the CSS. How can I fix this?
I’d have to take a look at your code to tell you. Is it online somewhere?
This is great! However the captions are not showing up for me in IE 10? Any help on this would be great 🙂
Alex,
The demo works fine for me in IE 10. Are you working from the demo, or on your own page? If it’s your own page, could you post a link to the code you’re having trouble with?
Hi Ron
How do you position the overlay? I am trying to get the top half of the overlay to show normal (always) & on rollover the overlay to slide up to reveal the bottom half?
Well, there are a number of ways to do that.
If the overlay is set to 50% of the height, you could just use the bottom setting to position it. Then, set the initial value of bottom to 0, and on the hover event, set bottom to 50%.
Thank you so much, works like a charm!
Actually a
display: inline-block;
might work better for some purposes. Had trouble with this and the float would just smash everything else beneath the image up into it.
If that’s the case, you’d just need to be sure you clear the float. Though, inline-block would definitely work as well.
Hi Ron,
I have been working with this code, and I would like to have three images in a row, each having separate titles appear over them. I am having trouble with the images remaining next to one another (float:left) without space, and having separate titles hover.
Each image is pushed below to form one column of three images, instead of next to one another.
Thank you!
Hi, Taylor.
In order for the images to line up in a row, you’ll have to apply float:left; to .img-wrap
Hi,
Is it possible to make this responsive? So instead of having a pixel width for the image you’d use a percentage. I tried this and the overlay extends past the image when I hover over the image.
Thanks
That’s a good question. I may have to go back and rewrite as a responsive solution. As-is, if you set .img-wrap to the desired percentage, and the image itself to max-width:100%; and height:auto; it should make it responsive.
Let me know if it works, and I’ll add it to the post as an update.
Hi Ron, having some troubles getting this to work in IE, Works in Firefox like a charm 🙂 (thanks) Now im no expert, but all i’ve changed is the height and width, so cant figure it out. I have set the… filter: alpha(opacity = 0); … to 0 but to no result. Hope you can help Thanks Joe
I’m assuming you mean IE7 or below, since it works fine in 8+.
IE7 and below do not allow the :hover pseudo-class for elements other than anchors.
I’m trying to figure out how get several images to use this hover effect and display in a row. Right now they display in a column, and I can’t figure it out. Thanks
Add float:left; to the .img-wrap class.
Here’s some more information about using floats in CSS: https://developer.mozilla.org/en-US/docs/CSS/float
That worked like a charm! You are a gentleman and a scholar too. Thanks so much Ron.
Glad I could help!