CODEWITHSUNDEEP
htmlcss
cristi
cristi

Reputation: 93

How do I apply an overlay this image?

I have this example:

https://jsfiddle.net/qfgx86wb/

CODE HTML:

<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

CODE CSS:

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

I found this example:

http://www.corelangs.com/css/box/overlay.html

This example we want to implement (the first picture in the link) ... I could not do these things for my html code is different and I do not want to modify it.

It can do this without changing the HTML code? Can you please show me an example?

Thanks in advance!

Upvotes: 2

Views: 61

Answers (1)

Turnip
Turnip

Reputation: 36642

You could use rgba for the background...

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

a {
    position: relative;
    display: inline-block;
}

a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(fallback-transparent.png); /* if rgba not supported */
    background: rgba(255, 0, 0, 0.3);
}
<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

or opacity ...

img {
    position:relative;
    z-index:0; 
    max-width:100%;
    height:auto; width:auto\9; /* ie8 */ 
}

a {
    position: relative;
    display: inline-block;
}

a:hover:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(fallback-transparent.png); /* if opacity not supported */
    background: red;
    opacity: 0.3;
}
<div>
    <a><img src="http://www.altradona.ro/old/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/m/i/microsoft-wireless-optical-mouse-5000.jpg"></a>
</div>

Upvotes: 3

Related Questions