Color transparency overlay on hover

Question

Working on my personal site and I have images that upon hover I would like to have a dark red overlay that is somewhat transparent. So far all I can find with webkit is changing the brightness, saturation or hue of the photo.

I might add that these features only work when I designate them to tags such as "img" and they don't work with "class" or "id."

Any help would be great.

Here is my code:

html

<div>
<img src="images/amadea/book.jpg" alt="Amadea Bailey- Abstract Expressionist">
</div>

css

img{
    display: block;
}

img:hover{
    -webkit-filter:  grayscale(100%) brightness(51%);
}

Solution

You could use an :after pseudo element that is absolutely positioned relative to the parent div elements. The pseudo element would be the same size as the parent, therefore it works for all img dimensions. It basically just adds a transparent overlay on :hover, achieving the 'filter' you're looking for. You can use any background color, customize the transparency and even add content..

EXAMPLE HERE

div {
    position:relative;
    display:inline-block;
}
div:hover:after {
    content:"\A";
    width:100%;
    height:100%;
    background:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
} 

Comments

[Josh Crozier]

@NoobEditor It's a line break or cartridge return. One of those. It's not necessarily needed, '' would work fine.

[NoobEditor]

@user3171515 : you might wanna mark this answer as accepted then...it marks the questions as completed!! :)