Hello there 👋. I hope you all are doing great. In today's article we'll see to create an amazing card hover effect. Its a beginners friendly tutorial, so if you don't know anything still you can follow this to code this card.

Card Hover

So this what we are going to create today.

Video tutorial.

You can follow the video tutorial. If you like, you can also subscribe my channel.

Let's start

So, let's start. For this we just need 2 files index.html and style.css file.

Write the basic HTML5 template and link style.css file to it. You can use google's "roboto" font also, if you like.

After done with linking fonts and CSS files. Let's make the body bluish first.

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

body{
    width: 100%;
    height: 100vh;
    background: #36768c;
    font-family: 'roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

So the above code will make the background blue. We gave display: flex to body, so that the card will place at centre.

Now let's make the card. So code this in index.html file.

<div class="card">
    <img src="img.jpg" class="card-img" alt="">
    <div class="card-body">
        <h1 class="card-title">NYC</h1>
        <p class="card-sub-title">new your city</p>
        <p class="card-info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum non laboriosam tenetur! Molestiae sapiente ut enim quibusdam asperiores nihil itaque, ex harum soluta, reiciendis illum?</p>

        <button class="card-btn">book tour</button>
    </div>
</div>

And style all the elements like this, you can modify any of the properties on your likings.

.card{
    width: 320px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    border: 8px solid #fff;
    position: relative;
}

.card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.card-body{
    width: 100%;
    height: 100%;
    top: 0;
    right: -100%;
    position: absolute;
    background: #1f3d4738;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 2s;
}

.card:hover .card-body{
    right: 0;
}

.card-title{
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 500;
}

.card-sub-title{
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 300;
}

.card-info{
    font-size: 16px;
    line-height: 25px;
    margin: 40px 0;
    font-weight: 400;
}

.card-btn{
    color: #1f3d47;
    background: #8fabba;
    padding: 10px 20px;
    width: 120px;
    border-radius: 5px;
    text-transform: capitalize;
    border: none;
    outline: none;
    font-weight: 500;
    cursor: pointer;
}

Output

When Hover -

So, that's it. I hope you guys like the effect and the article as well. If you do have any doubt feel free to ask me in comments or you can join my discord server. We'll talk there.

Also, if you want to master web development, make sure to follow me on my Instagram and YouTube.

With that all. Thanks for reading 😎

Blog

How to make simple card hover effect in 2022. Very easy Card hover effect for beginners

Modern Web

Card Hover

Video tutorial.

Let's start

Output

Join Our Newsletter. No Spam, Only the good stuff.

Related