HTML CSS examples for CSS Animation:Hover
Make a div expanding on mouse hover with animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w ww . jav a 2 s.c o m--> box-sizing: border-box; } .mainlink { font-size: 30px; color: rgba(255,0,0,0.7); transition: 0.3s ease-in-out; text-decoration: none; padding: 10px; } .mainbtn { transition: 0.3s ease-in-out; width: 40%; position: relative; margin: auto; height: auto; } div.content { position: absolute; transform: translate(-1px,1px); width: 100%; border: 1px solid rgba(255,0,0,1); } .content ul { display: none; list-style: none; margin: 0; padding: 0; } .content .mainlink:hover ~ ul, .content .mainlink ~ ul:hover { display: block; } .content a { color: rgba(255,0,0,0.7); display: block; list-style: none; background-color: #eee; transition: 0.2s ease-in-out; cursor: pointer; text-decoration: none; padding: 10px; } </style> </head> <body> <div class="mainbtn"> <div class="content"> <a href="#" class="mainlink">Hello</a> <ul> <li> <a href="#">World</a> </li> <li> <a href="#">You</a> </li> <li> <a href="#">Me</a> </li> </ul> </div> </div> </body> </html>