HTML CSS examples for CSS Widget:Hover Image
Hover on text link changes z-index of an image
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #switcher-wrapper {<!-- w ww .j a v a 2 s .c o m--> width:1001px; height:601px; margin:21px 21px; border:2px solid Chartreuse; position:relative; } #switcher-wrapper a { display:block; width:251px; height:251px; position:absolute; top:0; left:0; } a#eins { background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); left:41px; top:21px; } a#zwei { background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); left:21px; top:21px; } a#drei { background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); } #switcher-wrapper a span { position:absolute; } #eins span { left:0; bottom:-136px; } #zwei span { left:0; bottom:-156px; } #drei span { left:0; bottom:-176px; } #switcher-wrapper a:hover { z-index:2; } </style> </head> <body> <title>Lore</title> <div id="switcher-wrapper"> <ul> <li> <a id="eins" href="#"> <span>Lorem ips</span> </a> </li> <li> <a id="zwei" href="#"> <span>Lorem ips</span> </a> </li> <li> <a id="drei" href="#"> <span>Lorem ips</span> </a> </li> </ul> </div> </body> </html>