Learn how to create CSS Card 3d Hover Effect Animation.

Author: Swarup Kumar Kuila

Made with: HTML / CSS

Read More: Coffee Machine Pure CSS Animation

HTML

<div class="container mt30"> <div class="wrapper"> <ul class="stage clearfix"> <li class="scene"> <div class="movie" onlclick="returntrue"> <div class="poster"> </div> <div class="info"> <header> <h1>Heading</h1> <span class="year">20015</span> <span class="rating">PG</span> <span class="duration">102 M</span> </header> <p> CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats. </p> </div> </div> </li> <li class="scene"> <div class="movie" onlclick="returntrue"> <div class="poster"> </div> <div class="info"> <header> <h1>Heading 2</h1> <span class="year">20015</span> <span class="rating">PG</span> <span class="duration">102 M</span> </header> <p> CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats. </p> </div> </div> </li> <li class="scene"> <div class="movie" onlclick="returntrue"> <div class="poster"> </div> <div class="info"> <header> <h1>Heading 3</h1> <span class="year">20015</span> <span class="rating">PG</span> <span class="duration">102 M</span> </header> <p> CakeCounter provides specially baked cakes and treats that are available for shipping around the Jamshedpur. Our custom baked cakes are made using fresh and wholesome ingredients and are created with skill and artistry. From brownies and cookies or the perfect strawberry cake, our bakery provides just the right items for celebratory moments or everyday treats. </p> </div> </div> </li> </ul> </div> </div>

CSS