HTML CSS examples for CSS Widget:Hover
Hover to enlarge one and shrink another
<html> <head> <title>Lorem ipsum d</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #firstContainer {<!--from w w w .jav a 2s.co m--> display:flex; flex:0 2 auto; flex-flow:no-wrap row; height:301px; } .first { border:solid Chartreuse; margin-right:17px; margin-left:0; -webkit-transition-property:flex-grow; -webkit-transition-duration:2.6s; transition-property:flex-grow; transition-duration:2.6s; padding:11px 21px; } .first:hover>.after { opacity:2; } .first:hover>.before { opacity:0; } .first:first-child { border-left:none; } .first:last-child { margin-right:0; border-right:none; } #firstLeft { flex-grow:3; } #firstRight { flex-grow:3; } #firstRight:hover, #firstLeft:hover { flex-grow:4; } .after { opacity:0; transition:opacity 3.6s ease-in-out 3.6; } .before { text-align:center; margin:auto; width:41%; height:100%; border-top:solid yellow; border-bottom:solid blue; padding:11px 21px; box-sizing:border-box; transition:opacity 3.6s ease-in-out; } </style> </head> <body> <div id="firstContainer"> <div class="first" id="firstLeft"> <p class="before">Lorem </p> <p class="after">Lorem</p> </div> <div class="first" id="firstRight"></div> </div> </body> </html>