Profile card design using html and css ( Source Code )

Profile card design using html and css ( Source Code )

Add font awesome cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">


HTML


<div class="image-area"> <div class="img-wrapper"> <img src="https://i.postimg.cc/sgDnvqPB/1.png" alt=""> <h2> David James</h2> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-pinterest"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div>


CSS


body{ background: seagreen; margin: 0; } .image-area{ top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; } .img-wrapper{ width: 300px; height: 400px; position: relative; overflow: hidden; } .img-wrapper img{ height: 400px; width: 300px; filter: grayscale(100%); transition: 2s; } .img-wrapper:before{ content: ''; position: absolute; top: 0; left: 170%; height: 100%; width: 100%; background: rgba(255,255,255,0.2); transform: skew(45deg); transition: .5s; z-index: 1; } .img-wrapper:hover:before{ left: -170%; } .img-wrapper:hover img{ filter: grayscale(0%); transform: scale(1.1); } .img-wrapper h2{ background: tomato; font-family:Poppins; color: #fff; text-align: center; text-transform: uppercase; margin: 0; padding: 10px 0; position: absolute; bottom: 0; width: 100%; transform-origin: right; transform: perspective(500px) rotateY(90deg); transition: 1s; } .img-wrapper:hover h2{ transform: perspective(400px) rotateX(0deg); } .img-wrapper ul{ position: absolute; top: 0; left: 0; margin: 0; padding: 0; list-style: none; } .img-wrapper ul li{ background: #333; height: 40px; width: 40px; text-align: center; line-height: 30px; border-bottom: 1px solid rgba(0,0,0,0.1); transform: perspective(1000px) rotateY(90deg); transition: .5s; transform-origin: left; } .img-wrapper:hover ul li{ transform: perspective(800px) rotateX(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: 1.2s; } .img-wrapper ul li a{ color: tomato; }