HTML CSS examples for CSS Animation:Size
Fixing layout of content, animate expanding div
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .test {<!--from w w w .j a va 2s . c om--> transition: all .7s; width: 32px; height:48px; background: black; overflow: hidden; font-size: 24px; border-radius: 5px; padding: 5px; padding-bottom: 10px; } .test:hover { background-color: blue; height: auto; background: #DDDDDD; color: black; } .test:hover, .test p { width: 650px; } .test p { display: none; } .test:hover p { display: block; } .test h1 { margin: 0; color: white; } .test:hover h1 { display: none; } </style> </head> <body> <div class="test"> <h1>title</h1> <p>this is a test this is a test this is a test</p> </div> <h1>Examples</h1> <br> <h3>My name is About</h3> <div class="test"> <h1>Test</h1> <p>this is a test this is a test</p> </div> <h3>title title title title</h3> <div class="test"> <h1>Home</h1> <p>this is a test thsi is a test.</p> </div> </body> </html>