CSS profile card 3D hover Animation

Would you like to create a profile card with CSS that will display a 3D cube box animation on hover? Then this CSS animation example is a perfect fit for that. This snippet will have a plain image on one side and image-related information on another side. When the image will be hovered, the image div will be animated like a cube box and the information on the other side will come in front of us. Removing the hover will return it to its previous state. The Video tutorial below will demonstrate the step-by-step process of making it. Consider watching it before collecting the source code. It will help you comprehend the code. You can subscribe to Our Youtube Channel if you like our content.

I hope you have watched the video tutorial. Profile Cards are a simple way to introduce someone on a website. CSS cards are a way for web developers to quickly and easily create custom website elements. CSS cards can be used to quickly add visual interest to a website, and make it look more professional and modern. In the HTML Part, We have taken the container named 'wrapper'. Three anchor tags with the name 'box' have been taken in them. Two more divs have been taken inside the 'box-content' div. Each divs are given a common name 'sides' and two different names 'side-1' and 'side-2'. This is because the two divs have some common and some different styles. A background image is set on side 1 and image information such as name, brief info, and social media links are added on side 2.

In the CSS part, we will first remove the project's default margins and padding. Then we will bring the boxes to the middle of the viewport using the CSS display flex property. Each single-box div is given a width and height of 300px. A perspective value of 1200 is then given to it. CSS perspective allows us to simulate a 3d experience on a 2d web page. In the end, we basically achieved the 3d animation or cube box animation on hover using the CSS transform property. We also made it looks responsive using CSS media queries. Follow the video above for more details and to see how the rest of the elements are styled.

You May Also Like:

CSS profile card 3D hover Animation [ Source Code ]:

First Create HTML CSS files. Link the files properly when you create them. Put the code from the below code box into your project files. You can save them and test them on your browser. If you find problems with the code you can always download it from the download button provided below.

ADD HTML:

<html lang="en">
   <!-- divinectorweb.com -->
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Profile cards with 3D Hover Animation</title>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">    
  </head>
  <body>
    
    <div class="wrapper">
      <a href="#" class="box">
        <div class="single-box">
          <div class="box-content">
            <div class="sides side-1" style="background-image: url(img/1.jpg);"></div>
            <div class="sides side-2">
              <div class="content">
                <h2>John Doe</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur accusantium, maiores similique est aliquam laborum!</p>
                <p class="socials">
                  <i class="fa fa-facebook"></i>
                  <i class="fa fa-youtube"></i>
                  <i class="fa fa-linkedin"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </a>
      <a href="#" class="box">
        <div class="single-box">
          <div class="box-content">
            <div class="sides side-1" style="background-image: url(img/2.jpg);"></div>
            <div class="sides side-2">
              <div class="content">
                <h2>Dave Wood</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur accusantium, maiores similique est aliquam laborum!</p>
                <p class="socials">
                  <i class="fa fa-facebook"></i>
                  <i class="fa fa-youtube"></i>
                  <i class="fa fa-linkedin"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </a>
      <a href="#" class="box">
        <div class="single-box">
          <div class="box-content">
            <div class="sides side-1" style="background-image: url(img/3.jpg);"></div>
            <div class="sides side-2">
              <div class="content">
                <h2>Larry Jones</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur accusantium, maiores similique est aliquam laborum!</p>
                <p class="socials">
                  <i class="fa fa-facebook"></i>
                  <i class="fa fa-youtube"></i>
                  <i class="fa fa-linkedin"></i>
                </p>
              </div>
            </div>
          </div>
        </div>
      </a>
    </div>
    
  </body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
}
.wrapper{
    min-height: 100vh;
    background-color: #00112c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    margin: 20px;
}
.single-box{
    width: 300px;
    height: 300px;
    perspective: 1200px;
}
.box-content{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-150px);
    transition: all 1s;
}
.sides{
    position: absolute;
    width: 300px;
    height: 300px;
    text-align: center;
}
.side-1{
    transform: rotateY(0deg) translateZ(150px);
    z-index: 2;
    background-size: cover;
    background-position: center center;
}
.side-2{
    color: #fff;
    background-color: deepskyblue;
    transform: rotateY(90deg) translateZ(150px);
}
.box:hover .box-content{
    transform: translateZ(-150px) rotateY(-90deg);
}
.content{
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}
.content h2{
    font-family: alfa slab one;
    font-size: 25px;
}
.content p{
    font-size: 15px;
    line-height: 25px;
    font-family: 'Montserrat', sans-serif;
}
.socials{
    margin-top: 30px;
}
.socials i{
    margin: 0 15px;
}

@media (max-width:991px){
    .wrapper{
        flex-direction: column;
    }
}

We hope the code worked for you. If you enjoy our content, please share it with your friends. Please cooperate with us We can't proceed without your cooperation. We appreciate your interest and time on our site.

DOWNLOAD CODE

CSS profile card 3D hover Animation [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

CSS profile card 3D hover Animation

CSS profile card 3D hover Animation [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form