Create Animated Display Card Using HTML And CSS

Atul Prajapati

Someone's Name

Its features:

  • Touching the card will display a animation.

  • You can add a link to the name of each social button.

  • You can use the image you need instead of the fiction image.

  • You can change the hover color via CSS if you want.

Try to create like yourself by following the codes below :

Step 1) Add to folder :

First make one folder and put an images that you like.
Step 2) Add to head :

<link rel="stylesheet" href="">
Step 3) Add to html :

<h2>Create Animated Display Card With HTML And CSS</h2> <div class="fifteen"> <div class="img-wrapper"> <img src="c.png" alt="Atul Prajapati"> <h2>Someone's Name</h2> <ul> <li><a href="#abcd"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#abcd"><i class="fab fa-instagram"></i></a></li> <li><a href="#abcd"><i class="fab fa-twitter"></i></a></li> <li><a href="#abcd"><i class="fab fa-youtube"></i></a></li> <li><a href="#abcd"><i class="fab fa-pinterest"></i></a></li> </ul> </div> </div>
Step 4) Add to css :

*{margin:0; padding:0;} .fifteen{ width:310px; height:410px; background:#aaa; border-radius:10px; margin:auto; float:; } .img-wrapper{ width: 300px; height: 400px; position: absolute; overflow: hidden; margin-top:5px; margin-left:5px; } .img-wrapper:before{ content: ''; position: absolute; top: 0; left: 180%; height: 100%; width: 100%; background: rgba(255,255,255,.3); z-index: 1; transform: skew(45deg); transition: .5s; } .img-wrapper:hover:before{ left: -180%; } .img-wrapper img{ height: 400px; width: 300px; filter:; transition: 2s; } .img-wrapper:hover img{ filter: grayscale(0%); transform: scale(1.1); } .img-wrapper h2{ background-image: linear-gradient(#bbb, #ddd, #bbb); font-family: Poppins; color: black; text-align: center; text-transform: ; margin: 0; padding: 10px 0; position: absolute; bottom: 0; width: 100%; transform: perspective(400px) rotateY(90deg); transform-origin: right; transition: 1s; } .img-wrapper:hover h2{ transform: perspective(400px) rotateY(0deg); } .img-wrapper ul{ position: absolute; top: 0; left: 0; margin: 0; padding: 0; list-style: none; background: rgba(255,255,255,0); } .img-wrapper ul li{ background: #333; height: 40px; width: 40px; text-align: center; line-height: 40px; transform: perspective(800px) rotateY(90deg); transition: .5s; transform-origin: left; } .img-wrapper:hover ul li{ transform: perspective(800px) rotateY(0deg); } .img-wrapper:hover ul li:nth-child(1){ transition-delay: .2s; } .img-wrapper:hover ul li:nth-child(2){ transition-delay: .6s; } .img-wrapper:hover ul li:nth-child(3){ transition-delay: .8s; } .img-wrapper:hover ul li:nth-child(4){ transition-delay: 1s; } .img-wrapper ul li a{ color: tomato; background: rgba(255,255,255,0); } .img-wrapper ul li i{ color: tomato; background:rgba(255,255,255,0); } .img-wrapper ul li i:hover{ color: #fff; background: rgba(255,255,255,0); }

Thank you sir

Congratulations to you on visiting our page.

If you have any feedback, you can give advice through the "Contact Me" form.