Pure CSS hover resulting in a color-overlay with text
Solution 1
html
<div class="span4 red">
<img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg">
<div class="overlay">
<span>Text text text</span>
<button>Button</button>
</div>
</div>
css
.span4 {
width:25%;
display:block;
position:relative; /*added*/
}
/*added*/
.overlay {
position:absolute;
top:0;
width:0;
width:100%;
height:100%;
background-color:rgba(0, 0, 0, 0.3);
display:none;
}
.red:hover .overlay {
display:block;
}
Solution 2
Try using the :after
pseudo selector (note browser compatability)
.span4 {
width:25%;
display:block;
position: relative;
}
.span4:hover:after
{
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.red:hover:after
{
background: RGBA(255, 0, 0, .3);
}
.blue:hover:after
{
background: RGBA(0, 0, 255, .3);
}
.green:hover:after
{
background: RGBA(0, 255, 0, .3);
}
.purple:hover:after
{
background: RGBA(230, 230, 250, .3);
}
idk what the RGB value for purple is though :p so play around with it
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Admin
Updated on April 24, 2020Comments
-
Admin about 4 years
This is my first post on Stack Overflow, but I've been finding answers on here for years. This is one I can't seem to find though.
I'm wondering if there is a way to do the following using only HTML and CSS.
I have a fluid layout, and I want to keep the images fluid. I currently have each image set up to fill their respective divs by using the max-height:100% and max-width:100% properties.
On hover, I would like the image to have a slightly transparent color overlay, and reveal some text and a button.
I'm able to do this if I define the image/div width, but I cannot figure out how to do it while keeping the image so it re-sizes dynamically.
Here's a Fiddle of 4 images in a fluid layout. Any help would be GREATLY appreciated, I feel like I'm overlooking something.
And the code:
HTML
<body> <div id="container"> <div class="span4 red"> <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"> </div> <div class="span4 blue"> <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"> </div> <div class="span4 green"> <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"> </div> <div class="span4 purple"> <img src="http://img.thesun.co.uk/aidemitlum/archive/01500/SNE0125Q---_149991_1500286a.jpg"> </div> </div> </body>
CSS
body { margin:0;} #container { width:100%; font-size:0;} img { max-width:100%; max-height:100%;} .span4 { width:25%; display:block;} .red { background-color: red; float:left; overflow:hidden;} .blue { background-color: blue; float:left; overflow:hidden;} .green { background-color: green; float:left; overflow:hidden;} .purple { background-color: purple; float:left; overflow:hidden;}