🔴 Create Unique Card Hover Effects | Awesome Hover Animation

#html #css #beginners #codenewbie

Hello guys, today I am going to show you how to create a unique card hover effects, in this article you will learn how to How to make awesome hover animation using HTML & CSS.

Common Query

How to create profile card design
How to add hover effect using css

How to create a unique card hover effect step by step

Step 1 — Creating a New Project

In this step, we need to create a new project folder and files(index.html, style.css) for creating an awesome hover animation on card. In the next step, you will start creating the structure of the webpage.

See Also: Best card design UI

Step 2 — Setting Up the basic structure

In this step, we will add the HTML code to create the basic structure of the project.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create Unique Card Hover Effect </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

This is the base structure of most web pages that use HTML.

Add the following code inside the <body> tag:

 <div class="container">
        <div class="grid-row grid-auto">
            <div class="colmun">
                <div class="ch-item img">
                    <div class="info-wrap">
                        <div class="info">
                            <div class="info-front img"></div>
                            <div class="info-back">
                                <h6>JOHN DOE</h6>
                                <p>Visaul Designer <a href="#">Contact</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="colmun">
                <div class="ch-item img">
                    <div class="info-wrap">
                        <div class="info">
                            <div class="info-front img"></div>
                            <div class="info-back">
                                <h6>JOHN DOE</h6>
                                <p>Visaul Designer <a href="#">Contact</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="colmun">
                <div class="ch-item img">
                    <div class="info-wrap">
                        <div class="info">
                            <div class="info-front img"></div>
                            <div class="info-back">
                                <h6>JOHN DOE</h6>
                                <p>Visaul Designer <a href="#">Contact</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="colmun">
                <div class="ch-item img">
                    <div class="info-wrap">
                        <div class="info">
                            <div class="info-front img"></div>
                            <div class="info-back">
                                <h6>JOHN DOE</h6>
                                <p>Visaul Designer <a href="#">Contact</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Step 3 — Adding Styles for the Classes

In this step, we will add styles to the section class Inside style.css file

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'IBM Plex Sans', sans-serif;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.grid-row.grid-auto {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.ch-item {
    width: 220px;
    height: 284px;
    position: relative;
    cursor: pointer;
    margin: auto;
    box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 30%), 0px 1px 0px 1px rgb(28 34 36 / 30%);
}

.info-wrap {
    top: 20px;
    left: 20px;
    background: #1c2224;
    box-shadow: 0 0 0 20px rgb(225 255 255 / 20%), inset 0 0 3px rgb(115 114 23 / 80%);
}

.info-wrap,
.info {
    position: absolute;
    width: 180px;
    height: 244px;
}

.img {
    background: url(img.jpg);
}

.info .info-front {
    transition: all 0.6s ease-in-out;
}

.info>div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
}

.info-back {
    opacity: 0;
    background: url(cartographer.png) repeat;
    pointer-events: none;
    transform: scale(1.5);
    transition: all 0.4s ease-in-out 0.2s;
}

.info-back h6 {
    color: #fff;
    font-size: 20px;
    text-align: center;
    height: 64px;
    margin-top: 60px;
}

.info-back p {
    color: #fff;
    text-align: center;
    padding: 10px 5px 0;
    font-style: italic;
    margin: 0 20px;
    font-size: 12px;
    border-top: 2px dotted;
}

.info-back p a {
    display: block;
    color: #fa6900;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 1px;
    padding-top: 5px;
    transition: all 0.4s ease-out;
}

.ch-item:hover .info-back {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}