3D Card Hover Effect Using HTML CSS

3D Card Hover Effect Using HTML CSS

Introduction :

Hello friends, welcome to all of you. Today we have created an 3D Card Hover Effect Using HTML CSS, in which we have added a 3D image. When the user hovers over these images, a 3D image is displayed to the user, which looks quite amazing. It is quite easy to create a 3D image hover effect this way. If you have a little knowledge of CSS, then you can create effects of this type.

Explanation :

Using HTML code, we create the structure of our project, which we then use CSS ​​to style.

  • Head Section:
    • Meta links, Google font links etc. are all present in the head section.
    • A link to the CSS is also added in it, which is an external CSS with the help of which we design the project.
    • The project title is added to the head section.
  • Body Section:
    • <div class=”card”>: This is how we have created two card boxes in which we have added images, one is an image and the other is a page which shows on hover.
    • <div class=”wrapper”>: We have created another div in the card box in which we have added the image.
    • <img>: We have used this element to add the image.

Similarly, we have also added our second image whose code is as follows.

CSS Styling:

Now we will design our project with the help of CSS code, like what will be the background color, we are going to set all this with the help of CSS.

  • body: First we will style the body in which we will set color height margin.
    •   background: #191c29; We have used this color in the background of the body which you can edit.
    •   display: flex; We have used display flex in the body so that our body parts can flex.
    • The height and width of the body are kept full and the margins are zero.
  • card: To edit the card color, we have kept the position relative and we have used padding in it.
  • cover-image: In the cover image we have kept the width and height full and the object fit cover so that the image is displayed properly.
  • wrapper: This is our second image box which shows on hover so we have used z-index in it.
  • card:hover .wrapper: We have added hover effect to the card by using transform property in card hover and using box shadow.
  • wrapper::after/before: In card box we have used after and before element of Kass so that when user hovers over the image will show with 3D effect.

Index.html

 <body>
    <!-- partial:index.partial.html -->
    <div class="card">
      <div class="wrapper">
        <img
          src="https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg"
          class="cover-image"
        />
      </div>
      <img
        src="https://ggayane.github.io/css-experiments/cards/dark_rider-title.png"
        class="title"
      />
      <img
        src="https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp"
        class="character"
      />
    </div>

    <div class="card">
      <div class="wrapper">
        <img
          src="https://ggayane.github.io/css-experiments/cards/force_mage-cover.jpg"
          class="cover-image"
        />
      </div>
      <img
        src="https://ggayane.github.io/css-experiments/cards/force_mage-title.png"
        class="title"
      />
      <img
        src="https://ggayane.github.io/css-experiments/cards/force_mage-character.webp"
        class="character"
      />
    </div>
    <!-- partial -->
  </body>

Style.css

:root {
  --card-height: 300px;
  --card-width: calc(var(--card-height) / 1.5);
}
* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #191c29;
}
.card {
  width: var(--card-width);
  height: var(--card-height);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 36px;
  perspective: 2500px;
  margin: 0 50px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wrapper {
  transition: all 0.5s;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.card:hover .wrapper {
  transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
  box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
}

.wrapper::before,
.wrapper::after {
  content: "";
  opacity: 0;
  width: 100%;
  height: 80px;
  transition: all 0.5s;
  position: absolute;
  left: 0;
}
.wrapper::before {
  top: 0;
  height: 100%;
  background-image: linear-gradient(
    to top,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}
.wrapper::after {
  bottom: 0;
  opacity: 1;
  background-image: linear-gradient(
    to bottom,
    transparent 46%,
    rgba(12, 13, 19, 0.5) 68%,
    rgba(12, 13, 19) 97%
  );
}

.card:hover .wrapper::before,
.wrapper::after {
  opacity: 1;
}

.card:hover .wrapper::after {
  height: 120px;
}
.title {
  width: 100%;
  transition: transform 0.5s;
}
.card:hover .title {
  transform: translate3d(0%, -50px, 100px);
}

.character {
  width: 100%;
  opacity: 0;
  transition: all 0.5s;
  position: absolute;
  z-index: -1;
}

.card:hover .character {
  opacity: 1;
  transform: translate3d(0%, -30%, 100px);
}

Tags: ,