HTML CSS examples for CSS Widget:Color
Color overlay on hover for image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .image {<!--from ww w . ja va2 s . c o m--> background: url('https://www.java2s.com/style/demo/InternetExplorer.png'); width: 58px; height: 58px; position:relative; } .image:hover > .overlay { width:100%; height:100%; position:absolute; background-color:#000; opacity:0.5; border-radius:30px; } </style> </head> <body> <div class="image"> <div class="overlay"></div> </div> </body> </html>