Color transparency overlay on hover

colors, css, hover, overlay

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;
}

Problem

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%); } ```

Original source