HTML CSS examples for CSS Widget:Hover Animation
Div disappears on hover transition
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!--from w w w . j a v a2 s.com--> margin:0; } div.right { width:51vw; height:100vh; position:absolute; right:0; background-color:Chartreuse; transition:width 2s; } div.left { width:51vw; height:100vh; position:absolute; left:0; background-color:yellow; transition:width 2s; } div.right:hover { width:71vw; z-index:1000; } div.left:hover { width:71vw; z-index:1000; } p { text-align:center; vertical-align:middle; line-height:121vh; color:blue; font-family:sans-serif; font-size:251%; } </style> </head> <body> <div class="left"> <p>Lore</p> </div> <div class="right"> <p>Lorem</p> </div> </body> </html>