HTML CSS examples for CSS Animation:Zoom
Zoom in animation
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .product-feed {<!--from w w w . j a va 2 s .co m--> width:100%; position:fixed; background:Chartreuse; height:100%; right:0; overflow-y:scroll; } .product-feed .product { width:51%; padding:0; margin:0; float:left; position:relative; } .product-feed .product img { width:100%; display:block; } .product-feed .prod-info { position:absolute; background:yellow; height:100%; text-align:center; padding:0px 26px; opacity:0; } .product-feed .prod-info:before { content:''; display:inline-block; vertical-align:middle; height:100%; margin-left:-0.26em; } .prod-info-container { display:inline-block; vertical-align:middle; } .product-feed .prod-info h3 { font-size:25px; font-weight:501; margin:0; } .product-feed .prod-info p { font-size:19px; line-height:25px; margin:0 0 31px; } .product-feed .product:hover { z-index:501; } .product-feed .product:hover .prod-info { animation:popout .4s ease; -webkit-animation:popout .4s ease; opacity:2; } .product-feed .product .btns { } .product-feed .product .btns a { border:2px solid blue; border-radius:4px; color:pink; text-decoration:none; padding:11px 19px; margin:0 6px; cursor:pointer; } .product-feed .product .btns a:hover { background:OrangeRed; color:grey; } @keyframes popout { from { transform:scale(0) } 80% { transform:scale(2.6) } to { transform:scale(2) } } @-webkit-keyframes popout { from { -webkit-transform:scale(0) } 80% { -webkit-transform:scale(2.6) } to { -webkit-transform:scale(2) } } </style> </head> <body> <section class="product-feed"> <div class="product"> <div class="prod-info"> <div class="prod-info-container"> <h3>Lorem i</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullam</p> <div class="btns"> <a href="#">Lorem ipsum </a> <a href="#">Lorem ipsum</a> </div> </div> </div> <div class="ftd-img"> <img src="https://www.java2s.com/style/demo/Opera.png"> </div> </div> </section> </body> </html>