We would like to know how to create CSS image overlay with color and transparency.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.image-holder {<!-- w w w . ja v a 2s . c o m-->
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;
}
</style>
</head>
<body>
<div class="image-holder">
<img src="http://www.java2s.com/style/download.png" />
</div>
</body>
</html>
The code above is rendered as follows: