Html
copy
reset
Run
Netbax Online Editor Try it Yourself
<style> .transi { width:140px; height:90px; background:#c00; color:#fff; position:absolute; font-weight:bold; font-size:20px; text-align:center; padding:20px; float:left; margin:95px; -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; -webkit-border-radius:5px; -o-transition-property:width,height,-o-transform,background,font-size,opacity; -o-transition-duration:1s,1s,1s,1s,1s,1s; -moz-transition-property:width,height,-o-transform,background,font-size,opacity; -moz-transition-duration:1s,1s,1s,1s,1s,1s; transition-property:width,height,transform,background,font-size,opacity; transition-duration:1s,1s,1s,1s,1s,1s; border-radius:5px; opacity:0.4; } .transi:hover { opacity:1; background:#008000; color:#fff; width:400px; height:250px; font-size:20px; } </style> <h2>Css Transitions Properties</h2> <p>Mouseover Hover Me</p> <div class="transi">Example Text</div>
