3D card hover effect responsive using HTML CSS

In this article, we will create a 3d hover effect on a card which I have learned from Udemy if you are looking for the code then a copiable code is provided at the end of this article.

some prerequisites to create the 3d effect:
  • translate
  • transform-origin
  • skew

HTML :

we will make only one card for the learning purpose and for that we will need a parent-named card container with the child-named card1 this is all for the HTML now let’s go for the CSS,

CSS :

let’s reset the CSS and to put our card in the center use the flex properties to the container as well as apply width and height to the card add some box-shadow,
to make our card look like 3D we will use the transform property to rotate it from the y-axis and skew it from the x-axis which makes it a little tilted,

now for the image, we will use the background property to the card and add the image with some changes in the size and position of the image accordingly we will have the transition of .5s,
let’s have some hover effects, the hover effect in which the transform property will be the same but with the translate on the y-axis with -3rem which makes the 3d hover possible
now to make a 3D card we will use before and after property to create the edges of a card, as the side of the edge changes we need to change the transform-origin and use a skew to change the dimensions of the edge which will make our output look like shown below,

hover

we have got the final product you can add some more cards in the card-container just copy paste all the HTML and CSS of the card-1 make some changes accordingly and the output that you will get your desired output

Copiable code :

<!DOCTYPE html>
<html lang="en">
  <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>3d_Effect</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        outline: 0;
      }

      .card_container {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100vh;
        padding: 5rem;
        justify-content: center;
        align-items: center;
      }

      .card {
        width: 17rem;
        margin: 2rem;
        height: 25rem;
        background: url(images/ms.\ marvel.jpg);
        opacity: .9;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        box-shadow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.411);
        transform: rotateY(20deg) skewX(-2deg);
        transition: all 0.5s;
        color: white;
      }
      .card:hover {
        transform: rotateY(20deg) skewX(-2deg) translateY(-3rem);
        box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.427);
        opacity: 1;
      }
      .card1::before {
        content: "";
        height: 100%;
        width: 1rem;
        background: url(images/ms.\ marvel.jpg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        left: -1rem;
        transform: skewY(45deg);
        transform-origin: right;
        box-shadow: -0.1rem -0.1rem -0.1rem #000;
      }
      .card1::after {
        content: "";
        height: 1rem;
        width: 100%;
        background: url(images/ms.\ marvel.jpg);
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        top: -1rem;
        left: 0;
        transform: skewX(45deg);
        transform-origin: bottom;
        box-shadow: -0.1rem -0.1rem -0.1rem #000;
      }
    </style>
  </head>
  <body>
    <div class="card_container">
      <div class="card card1"></div>
    </div>
    <script
      src="https://kit.fontawesome.com/bbcd22c396.js"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Leave a Comment

Your email address will not be published.

Scroll to Top