HTML CSS examples for CSS Widget:Hover Effect
CSS 3D Box Hover Effect - Diagonal Corners
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> li {<!-- w w w.j a va2s .com--> position:relative; background:pink; top:0; left:0; transition:all 100ms ease-in; } li:hover { top:-5px; left:-5px; } li:hover:before, li:hover:after { opacity:2; } li:before, li:after { content:''; display:block; position:absolute; opacity:0; transition:opacity 100ms ease-in; } li:after { height:100%; right:-5px; top:0; border-top:5px solid Chartreuse; border-left:5px solid yellow; } li:before { width:100%; height:5px; top:100%; border-left:5px solid blue; border-top:5px solid pink; } section { height:201px; width:601px; } li { list-style:none; display:block; float:left; height:48%; margin-bottom:3%; } a { outline:0; height:100%; width:100%; display:block; color:OrangeRed; text-decoration:none; position:relative; top:0; left:0; box-shadow:0px 0px 0px 0px grey; transition:all 100ms ease-in; background-color:BlueViolet; } span { display:block; position:absolute; top:51%; margin-top:-16px; width:100%; text-align:center; font-family:Calibri; font-size:23px; font-weight:100; } .wide { width:33%; margin-left:3%; } .small { margin-left:3%; width:22%; } .small.narrow { width:21%; } .dark { color:Chartreuse; } #illustrations { background-color:yellow; } #drawings { background-color:blue; } #web { background-color:pink; } #print { background-color:OrangeRed; } #other { background-color:grey; } </style> </head> <body> <section> <li class="tall" id="logos"> <a class="dark" href=""> <span>Lorem</span> </a> </li> <li class="wide" id="illustrations"> <a class="dark" href=""> <span>Lorem ipsum d</span> </a> </li> <li class="wide" id="drawings"> <a href=""> <span>Lorem ip</span> </a> </li> <li class="small" id="web"> <a href=""> <span>Lor</span> </a> </li> <li class="small narrow" id="print"> <a href=""> <span>Lorem</span> </a> </li> <li class="small" id="other"> <a class="dark" href=""> <span>Lorem</span> </a> </li> </section> </body> </html>