HTML CSS examples for CSS Widget:Hover Image
Hover to add shade to image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #thumb-services {<!--from w w w .ja v a2 s. c om--> height:251px; } #thumb-services>a { width:25%; height:100%; float:left; cursor:pointer; position:relative; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat top left/cover; } #thumb-services>a + a { margin-left:2.33%; } #thumb-services>a:nth-of-type(2) { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #thumb-services>a:nth-of-type(3) { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #thumb-services>a:nth-of-type(4) { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #thumb-services>a:before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; background-color:Chartreuse; display:none; } #thumb-services>a:hover:before { display:block; } </style> </head> <body> <nav id="thumb-services"> <a></a> <a></a> <a></a> <a></a> </nav> </body> </html>