Card Hover Effect using CSS

Hey, developers welcome to Day 16 of our 90Days 90Projects challenge. And in Day 16 we are going to create a Card Hover Effect using HTML and CSS.

So to run the code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

card hover effects css, card hover effects css codepen, simple card hover effects css, geeks help, css advanced course, css advanced concept

HTML Code

<!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> Card Hover Effect </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="main-div">
            <div class="card">
                <div class="imgbox">
                    <img src="./card-Image.jpg" alt="">
                </div>
                <div class="content">
                    <h2>Keep Smiling</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
                        eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
                </div>
            </div>
            <div class="card">
                <div class="imgbox">
                    <img src="./card-Image.jpg" alt="">
                </div>
                <div class="content">
                    <h2>Keep Smiling</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
                        eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
                </div>
            </div>
            <div class="card">
                <div class="imgbox">
                    <img src="./card-Image.jpg" alt="">
                </div>
                <div class="content">
                    <h2>Keep Smiling</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, eum! Repellendus nemo voluptates
                        eius, illum esse consectetur ex laborum facilis saepe nesciunt suscipit! Raju Koth Kalan</p>
                </div>
            </div>
        </div>
</body>
</html>


CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(243, 154, 11);
}

.card {
    margin: 0 2rem 0 2rem;
    position: relative;
    width: 300px;
    height: 180px;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    padding: 30px;
    transition: .3s;
    background-color: #fff;
    cursor: pointer;
}

.card:hover {
    height: 350px;
    transition: .3s;
}

.card:hover .content {
    transform: translateY(-170px);
    opacity: 1;
}

.imgbox {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 99;
}

img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transform: translateY(-80px);
}

.content {
    transition: .3s;
    transform: translateY(-350px);
    text-align: center;
    opacity: 0;
}

.content h2 {
    margin-bottom: 0.3rem;
}

.main-div {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad