How to make simple card hover effect in 2022. Very easy Card hover effect for beginners
Tags: css, html, uiweekly, beginners
Published: 2022-03-12 17:51:51

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

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htrxsj8l02rdgk0fod71.gif)

So this what we are going to create today.

#Video tutorial.

{% youtube 3RvQJX1_fKQ %}

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.

```CSS
*{
    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.

```HTML
<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.

```CSS
.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

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77e4km3nh9z7h7rasdql.png)
 
When Hover - 

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pemtuccij14p1g18apk.png)
 
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](https://discord.gg/HC6qKCpG2N) server. We'll talk there.

Also, if you want to master web development, make sure to follow me on my [Instagram](https://www.instagram.com/modern_web_channel/) and [YouTube](https://www.youtube.com/c/modernweb?sub_confirmation=1).

With that all. Thanks for reading 😎