Amazing 3D Card Hover Effect With Only HTML and CSS
A commonly seen design pattern is to have a card container with other cards underneath it, resulting in a multi-layer stacking effect. Then, during the hover state, the cards smoothly disappear or change their default position. In this short tutorial, we’ll learn a simple CSS technique for creating such an effect.
As usual, let’s have a first look at our demo (scroll through to see all the examples):
Post Title1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
Post Title2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
Post Title3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
Post Title4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
Post Title5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
Post Title6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis.
HTML Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-sale=1.0">
<title>Responsive 3D Image Hover Effect</title>
</head>
<body>
<section>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://images.unsplash.com/photo-1562988688-89b817b6d108?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=846&q=80" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://images.unsplash.com/photo-1514934240037-027a3f7be6f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://images.unsplash.com/photo-1550935114-99de2f488f47?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://image.freepik.com/free-photo/girl-preparing-ride-horse_1157-4628.jpg" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://image.freepik.com/free-photo/portrait-beautiful-young-woman-against-blurred-plants_23-2148049574.jpg" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="imgBx">
<img src="https://image.freepik.com/free-photo/portrait-young-pretty-redhead-girl-with-freckles-smiling-touching-hair_176420-9768.jpg" alt="">
</div>
<div class="contentBx">
<div> <h2>Post Title6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis mi interdum, faucibus leo sed, bibendum quam. Quisque vulputate sit amet leo non efficitur. Donec vel consectetur sapien, vel congue felis. </p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS Code:
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: tahoma;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
section{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
transform-style: preserve-3d;
width: 1100px;
}
section .card{
position: relative;
width: 320px;
height: 320px;
margin: 20px;
transform-style: preserve-3d;
perspective: 1000px;
}
section .card .box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s ease;
}
section .card:hover .box{
transform: rotateY(180deg);
}
section .card .box .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
section .card .box .imgBx img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
section .card .box .contentBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
transform: rotateY(180deg);
}
section .card .box .contentBx div{
transform-style: preserve-3d;
padding: 20px;
background: linear-gradient(45deg,#fe0061,#ffeb3b);
transform: translateZ(100px);
}
section .card .box .contentBx div h2{
color: #fff;
font-size: 20px;
letter-spacing: 1px;
}
section .card .box .contentBx div p{
color: #fff;
font-size: 16px;
}
/**-----End of CSS ----**/
Try this amazing card hover effect.
Follow for more.
Comment about it.
Your card hover effects are really amazing.
ReplyDelete