CSS image overlay with color and transparency

http://stackoverflow.com/questions/17721960/css-image-overlay-with-color-and-transparency

HTML

<div class="image-holder">
    <img src="https://www.gravatar.com/avatar/fa5e43a0cdd85a18c4e6b75e5d3a4f9a?s=80" />
</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;
}