HTML CSS examples for CSS Widget:Hover
make a div move down if mouse hovers over it
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #example {<!-- w ww .j a v a 2 s . com--> height:201px; background-color:Chartreuse; } #example:hover { position:relative; margin-top:41px; animation-name:slide-down; animation-duration:3s; -moz-animation-name:slide-down; -moz-animation-duration:3s; -webkit-animation-name:slide-down; -webkit-animation-duration:3s; } @keyframes slide-down { from { margin-top:0px; } to { margin-top:41px; } } @-moz-keyframes slide-down { from { margin-top:0px; } to { margin-top:41px; } } @-webkit-keyframes slide-down { from { margin-top:0px; } to { margin-top:41px; } } </style> </head> <body> <div id="example"></div> </body> </html>