overlay demo

by audetwebdesign

HTML

<div class="img-overlay">
    <img src="http://placekitten.com/200/200">
</div>

CSS

.img-overlay {
    border: 1px solid blue;
    float: left;
    position: relative;
}
.img-overlay:after {
    content:'';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: white;
    filter: alpha(opacity=40); /* internet explorer */
    opacity: 0.4; /* fx, safari, opera, chrome */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}
img {
    display: block;
}