Image Hover Overlay -- Need Colorful Transparency - html

Question

I am trying to add a colorful transparent overlay when you hover over an image (any color: purple, blue, red, orange would be great), but instead I am getting a white transparent overlay. Please note, I am using bootstrap grid so that my images stay responsive. I've tried everything I can think of... adding a background-color: blue with some opacity, but I am stuck. White overlay looks okay, but I wanted to have some fun with the color. Please see my code below and tell me what I need to do. Many thanks!
<div class="container">
<div class="row">
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers4.jpg" class="img-responsive">
</a>
</div>
<div class="hover12 col-lg-3 col-sm-4 col-xs-6">
<a href="#" class="thumbnail">
<img src="images/flowers5.jpg" class="img-responsive">
</a>
</div>
</div> <!-- closes div row -->
</div> <!-- closes div container -->
CSS code:
.hover12 img {
background-color: blue;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover12 img:hover{
opacity: .5;
}

Answer 1

opacity fades out the entire element including its background, it does not make the contents transparent and the background show through. What you would want to do instead is either put an element with your color (blue perhaps) underneath the image and make the image opaque (with opacity), or hide and show an element on top of the image that has some transparency.
Here is an example. On hover, the image becomes 50% opaque and you can see the blue element under it showing through.
.img-container {
background-color: blue;
display: inline-block;
line-height: 0;
}
.img-container img:hover {
opacity: .5;
}
<div class="img-container"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQU-rOCZDSdyIGgSvZhU-lqIhG32Yd8KrwI3gWKXSCayFXQuJTx0g" /></div>
Edit:
I just looked at your code again and realized you basically have it right, except you have the background color set on the img element, but it should be set on the element that contains the img, which is the .thumbnail class, so try just adding:
.thumbnail {
background-color: blue;
}

Answer 2

This is probably best accomplished using a pseudoelement that overlays the image. Here is how to create a pseudoelement that overlays an image and has reduced opacity when the image is rolled over:
#theimg {
position: relative;
display: inline-block;
}
#theimg::after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: blue;
opacity: 1;
}
#theimg:hover::after {
opacity: .5;
}
<div id="theimg">
<img src="https://i.imgur.com/LDR6AWn.png?1" />
</div>

Answer 3

Easiest way is to use :before to make a semi-transparent overlay:
img:hover:before {
content: '';
position:absolute;
top:0;left:0;bottom:0;right:0;
background:rgba(0,0,255,0.3);
}
Downside is that it will block the image being clickable, and may be an issue when you are using images with CSS background instead of the <img /> in HTML.
Another way, if Internet Explorer support isn't an issue (which could be the case if this effect is just for show), you could play around with the CSS filter. It's not as easy as overlaying a transparent image over the image, but you can get some very nice effects:
img.grayscale:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
img.contrast:hover { -webkit-filter: contrast(150%); filter: contrast(150%); }
img.brightness:hover { -webkit-filter: brightness(1.5); filter: brightness(1.5); }
img.hue-rotate:hover { -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); }
img.saturate:hover { -webkit-filter: saturate(2); filter: saturate(2); }
img.blur:hover { -webkit-filter: blur(2px); filter: blur(2px); }
img.invert:hover { -webkit-filter: invert(1); filter: invert(1); }
img.sepia:hover { -webkit-filter: sepia(75%); filter: sepia(75%); }
For your question, I would recommend using .hue-rotate and maybe add a CSS transition. Note: you can combine effects!
Play around with sliders:
http://www.cssreflex.com/css-generators/filter/ or http://html5-demos.appspot.com/static/css/filters/index.html