This CSS code project helps you to create a card element that displays a 3D-image view, a title, and a character description when hovered over. The card’s title has a transition effect applied to it that moves it upward when the card hovers over, and the character element, which is positioned behind the wrapper and is initially invisible, becomes visible and moves upward when the card hovers over.
How to Create CSS Cards with 3D-Image View on Hover
Create the HTML structure for the cards as follows:
<a href="https://www.mythrillfiction.com/the-dark-rider" alt="Mythrill" target="_blank">
<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>
</a>
<a href="https://www.mythrillfiction.com/force-mage" alt="Mythrill" target="_blank">
<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>
</a>
Style the cards using the following CSS styles:
: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);
}
Code Explanation
:root selector sets custom properties or CSS variables for the entire document. In this case, the properties are --card-height and --card-width, which are later used in the .card class.
.card class sets the width, height, position, display, padding, and perspective properties for the card element. The justify-content and align-items properties center the content of the card element. The margin property adds spacing around the card element.
.cover-image class sets the width and height properties for the image displayed on the card. The object-fit property is used to ensure that the image covers the entire element without stretching or distorting.
.wrapper class sets the transition, position, width, and z-index properties for the element that displays the character information. The transition property sets the duration and easing function for the animation that occurs when the user hovers over the card element. The position property sets the position of the element as absolute. The z-index property ensures that the element is positioned behind the card element.
.card:hover .wrapper class sets the transformation, box-shadow, and opacity properties for the .wrapper element when the user hovers over the card element. The transform property applies a perspective, translation, and rotation effect to the .wrapper element. The box-shadow property adds a shadow to the .wrapper element. The opacity property makes the .wrapper element visible.
.wrapper::before and .wrapper::after classes create two pseudo-elements before and after the .wrapper element. These elements are used to create a gradient effect over the image and add more depth to the animation when the user hovers over the card element.
.card:hover .wrapper::before and .card:hover .wrapper::after classes set the opacity and height properties of the pseudo-elements when the user hovers over the card element.
.title class sets the transition property for the title element displayed on the card. When the user hovers over the card element, the transform property is used to move the title element upwards and give the animation more depth.
.character class sets the opacity, transition, position, and z-index properties for the character element displayed on the card. The opacity property is set to 0 to hide the element until the user hovers over the card. When the user hovers over the card, the opacity and transform properties are used to make the element visible and give the animation more depth.
That’s all! hopefully, you have successfully created CSS Cards with 3D-Image View on Hover. If you have any questions or suggestions, feel free to comment below.
