DEV Community

loading...
Cover image for How to make an awesome card hover effect

How to make an awesome card hover effect

Modern Web
Hello, I am kunaal a fullstack developer.I have a youtube channel "Modern Web" where I teach to make awesome web UI/ UX. Don't forget to checkout my youtube channel
・2 min read

Hello, glad you are here. I am kunaal and today we will see how to make an awesome 3d card hover effect. You can see demo below.

Demo

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

<div class="card">
        <div class="card-img"></div>
        <div class="card-body">
            <span class="bg"></span>
            <span class="bg"></span>
            <span class="bg"></span>
            <div class="content">
                <h2 class="title">card 01</h2>
                <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aperiam fugiat eos odit numquam vitae facere dolore id libero sit!</p>
            </div>
        </div>
    </div>
Enter fullscreen mode Exit fullscreen mode

After that we only have to add CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'roboto', sans-serif;
    background: rgb(49, 162, 255);
    perspective: 1000px;
}

.card{
    width: 300px;
    height: 450px;
    position: relative;
    transform-style: preserve-3d;
    transition: 1s;
}

.card-img{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(img.jpg);
    background-size: cover;
    border-radius: 20px;
    transform: translateZ(40px);
}

.card-body{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, -40px) rotateY(180deg);
    width: 85%;
    height: 87%;
    border-radius: 20px;
    overflow: hidden;
    border: 5px solid #fff;
}

.card:hover{
    transform: rotateY(180deg);
}

.card-body .bg{
    position: absolute;
    background: #fff;
    border-radius: 100px;
    width: 0%;
    transition: .5s;
}

.card-body .bg:nth-child(1){
    height: 25%;
    transform-origin: left;
    top: 0;
    left: -30%;
    transform: rotate(-10deg);
}

.card-body .bg:nth-child(2){
    height: 50%;
    transform-origin: right;
    top: 5%;
    right: -30%;
    transform: rotate(-10deg);
}

.card-body .bg:nth-child(3){
    height: 50%;
    transform-origin: left;
    top: 70%;
    left: -30%;
    transform: rotate(-10deg);
}

.card:hover .card-body .bg{
    width: 200%;
    transition-delay: 1s;
}

.card:hover .card-body .bg:nth-child(2){
    transition-delay: 1.5s;
}

.card:hover .card-body .bg:nth-child(3){
    transition-delay: 2s;
}

.content{
    position: relative;
    opacity: 0;
    transition: .5s;
    padding: 40px 10px;
    text-align: center;
}

.title{
    font-size: 60px;
    margin-bottom: 20px;
    color: #292929;
    text-transform: uppercase;
}

.card:hover .content{
    opacity: 1;
    transition-delay: 2.5s;
}
Enter fullscreen mode Exit fullscreen mode

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source CodeMy youtube Channel, Instagram

Discussion (7)

Collapse
hasnaindev profile image
Muhammad Hasnain

Nice but I think the 3 animated background spans gives it a bad UX. I simply don't think it is convenient for users. Great for practice and learning but not something I'd want in a real project.

Collapse
guscarpim profile image
Gustavo Scarpim

Wow, nice work!!

Collapse
scriptnoob12 profile image
Maximiliano Jesús Contrera

Nice work!

Collapse
boomshakar profile image
Oluwafemi Ṣosanya

This is really great

Collapse
dev_emmy profile image
nshimiye_emmy

wow, this is great

Collapse
amircahyadi profile image
Amir-cahyadi

Awesome !

Collapse
cristoferk profile image
CristoferK

Nice!