HTML CSS examples for CSS Widget:Color
Make the color of an element darker on :hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .image {<!-- w w w . j a v a 2 s .co m--> background: url('https://www.java2s.com/style/demo/Safari.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>