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