HTML CSS examples for CSS Widget:Hover Image
Hover div rgba with a background image without changing opacity of the text color
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- w w w . ja v a 2s. co m--> background:Chartreuse; } .service-single-box { cursor:default; margin-top:16px; margin-bottom:16px; overflow:hidden; position:relative; text-align:center; width:201px; height:137px; } .service-single-box:hover, .service-single-box:focus { background-color:yellow; border-top:2px solid blue; border-left:2px solid pink; border-bottom:3px solid OrangeRed; border-right:3px solid grey; cursor:default; } .service-single-box img:hover, .service-single-box img:focus { background-color:BlueViolet; border:2px solid Chartreuse; cursor:default; background-color:yellow; } .relax-massage { background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png'); border:2px solid } .relax-massage h3 { color:blue; text-transform:uppercase; font-size:17px; font-weight:bold; width:171px; padding-top:21px; } .relax-massage h3:hover { color:pink; } .relax-massage h3:before { width:29%; background:none repeat scroll 0 0 OrangeRed; border-top:2px solid grey; content:""; height:6px; top:29px; position:absolute; } .relax-massage:hover>h3:before { background:BlueViolet; border-top:none; } </style> </head> <body> <div class="service-single-box relax-massage"> <h3 class="service-title">Lorem ipsum d</h3> </div> </body> </html>