How to make CSS Card Hover Effect using HTML

by stackdeveloping
12 comments 19,247 views
Card Element with Hover Effect

Contents

Hover Effect

Intro

In this article you will learn simple card hover effects css. From your experience, Cards are one of the most important Front-End designs elements, since they can be used on showing types of services, types of Prices etc. In this article we are about to give you a way how to design in modern way and in light way only by using HTML and CSS.

Card Element Hover Effect

 

HTML Part

In this part we have create only a simply HTML Document, with 3 main Boxes that represents the Card Element it self.

<!DOCTYPE html>
<!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>StackDeveloping - Card Outer Glow Effect</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <i class="fab fa-windows"></i>
                    <h3>Windows</h3>
                </div>
            </div>
            <div class="face face2">
                <div class="content">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates non ut inventore asperiores quasi, corporis iusto dolorum tenetur assumenda, veniam quas dolores ab eveniet temporibus hic deserunt architecto amet repellendus?</p>
                    <a href="#" type="button">Read More</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <i class="fab fa-android"></i>
                    <h3>Android</h3>
                </div>
            </div>
            <div class="face face2">
                <div class="content">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates non ut inventore asperiores quasi, corporis iusto dolorum tenetur assumenda, veniam quas dolores ab eveniet temporibus hic deserunt architecto amet repellendus?</p>
                    <a href="#" type="button">Read More</a>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <i class="fab fa-apple"></i>
                    <h3>Apple</h3>
                </div>
            </div>
            <div class="face face2">
                <div class="content">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptates non ut inventore asperiores quasi, corporis iusto dolorum tenetur assumenda, veniam quas dolores ab eveniet temporibus hic deserunt architecto amet repellendus?</p>
                    <a href="#" type="button">Read More</a>
                </div>
            </div>
        </div>
    </div>
    <script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
</body>
</html>

As you can read by the code, we are about to display 3 main cards element, if we make a hover effect card  action over these elements, we will apply some CSS Effects.

If you want to see how above code looks like Try it in our Online Editor

Css Part

Everything that is done in this section is to give all these 3 blocks the effect of separating one Up and another down, the effect is done by using only CSS and only transform translateY() property and some Transition Delay. The colors and the Box Shadows you can put as You Wish.

body{
    display: flex;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #444;
    justify-content: center;
    align-items: center;
    font-weight: arial;
}
.container{
    width: 1000px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.container .card{
    position: relative;
}

.container .card .face {
    width: 300px;
    height: 200px;
    transition: .4s;
}

.container .card .face.face1{
    position: relative;
    background: #333;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.container .card:hover .face.face1{
    transform: translateY(0);
    box-shadow: 
         inset 0 0 60px whitesmoke,
         inset 20px 0 80px #f0f,
         inset -20px 0 80px #0ff,
         inset 20px 0 300px #f0f,
         inset -20px 0 300px #0ff,
         0 0 50px #fff,
         -10px 0 80px #f0f,
         10px 0 80px #0ff;
}
.container .card .face.face1 .content{
    opacity: .2;
    transition: .5s;
    text-align: center;
}

.container .card:hover .face.face1 .content{
    opacity: 1;
}

.container .card .face.face1 .content i{
    font-size: 3rem;
    color: #fff;
    display: inline-block;
}
.container .card .face.face1 .content h3{
    font-size: 1rem;
    color: #fff;
    text-align: center;
}
.container .card .face.face1 .content a{
    transition: .5s;
}

.container .card .face.face2{
    position: relative;
    background: whitesmoke;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0,.8);
    transform:translateY(-100px);
}
.container .card:hover .face.face2{
    transform: translateY(0);
}

.container .card .face.face2 .content p, a{
    font-size: 10pt;
    margin: 0;
    padding: 0;
    color: #333;
}


.container .card .face.face2 .content a{
    text-decoration: none;
    color: #000;
    box-sizing: border-box;
    outline: 1px dashed #333;
    padding: 10px;
    margin: 15px 0 0;
    display: inline-block;
}

.container .card .face.face2 .content a:hover{
    background: #333;
    color: whitesmoke;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
}

Our Team Also have developed Full Licensed the Online Editor where everyone can check or everyone can use it for same purpose, to provide to users the online HTML, CSS and JavaScript the demonstration of the above code.

TRY IT now

You may also like

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.

12 comments

How to Build a platform that open sources itself - Stack Code Info June 15, 2023 - 3:40 pm

[…] dock. The project panel can be placed in the left or right dock, and what is now called the “terminal panel” can be placed in any of the […]

Reply
How we Integrated a React App into a GO CLI - Stack Code Info June 15, 2023 - 3:55 pm

[…] a React app into a GO CLI is an uncommon product decision, so before diving into the technicalities it’s worth calling out […]

Reply
bahis siteleri porn December 22, 2023 - 12:29 pm

daxktilogibigibi.viT4a4pkb5cR

Reply
seines December 29, 2023 - 7:53 pm

xyandanxvurulmus.6cO1TLZzNu1t

Reply
cooperator December 29, 2023 - 9:29 pm

xbunedirloooo.8Qo9818Zs7Hq

Reply
discursuses December 30, 2023 - 8:20 am

discursuses xyandanxvurulmus.kVoBtvpKO7x5

Reply
duh January 1, 2024 - 1:43 am

duh xyandanxvurulmus.Ilc0dA2S0Klj

Reply
bahis siteleri porn sex incest February 2, 2024 - 11:31 am

food porn pompadirha.dQsM4gxSeUcI

Reply
craft porn February 3, 2024 - 12:02 pm

watch porn video hepxhupx.GN1khmeVH0B9

Reply
food porn February 3, 2024 - 12:57 pm

escort siteleri juljulfbi.YI03U3yzKhYa

Reply
seksi siteler February 5, 2024 - 7:37 am

pornhub bahis siteleri 0qbxjluaxcxjsxzz.6WFf84szaKTv

Reply
sms onay servisi February 18, 2024 - 1:17 pm

Servislerimiz sayesinde sms onay sizde en uygun fiyatlardan mobil hesap sms telefon onay yaptırabilirsiniz.

Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More