Transparent overlay on image hover

<style> .image { position:relative; width:400px; height:400px; } .image img { width:100%; vertical-align:top; } .image:after { content:'\A'; position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(255,255,255,0.6); opacity:0; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:hover:after { opacity:1; } </style> <div class="image"> <img src="" alt="" /> </div>
Change the background color and opacity of the overlay color you want.

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.