I am trying to figure out if I can add an overlay to an image like a tint and change the opacity without adding background color. I had no luck so I thought I would ask here.
I would like to make it red with that opacity. here is what I have so far.
I made an image to overlay it if I have to called overlay.png but don't know if its necessary.
img.highlighted {
opacity:0.4;
}
Basically I want to do this but reverse, for image to tint when hovered not to take the tint away when hovered.
check it out here
http://jsbin.com/igahay/3011/edit
If you want to make the reverse of what you showed consider doing this:
.tint:hover:before {
background: rgba(0,0,250, 0.5);
}
.t2:before {
background: none;
}
and look at the effect on the 2nd picture.
Is it supposed to look like this?
Have you given a try to Webkit Filters?
You can manipulate not only opacity, but colour, brightness, luminosity and other properties:
HTML:
<div class="image-holder">
<img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>
CSS:
.image-holder {
display:inline-block;
position: relative;
}
.image-holder:after {
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
display: block;
position: absolute;
background: blue;
opacity: 0.1;
}
.image-holder:hover:after {
opacity: 0;
}
something like this? http://codepen.io/Nunotmp/pen/wKjvB
You can add an empty div
and use absolute positioning.
Source: Stackoverflow.com