In this video we are going to build a responsive CSS card hover effect . Hope you enjoyed this video . Make sure to like this video and do subscribe my channel. Thanks for watching.
Source code:
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<title>Image Hover Effect</title>
</head>
<body>
<div class="box">
<div class="divBox">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
<div class="content">
<p class="title">Title</p>
<p class="info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis a vitae dicta culpa numquam neque, quis fugit alias, reiciendis beatae soluta. Similique corrupti optio deserunt!
</p>
<button class="btn">Read More</button>
</div>
</div>
</body>
</html>
CSS :
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: josefin sans;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #286286;
overflow: hidden;
}
.box {
width: 20%;
height: 40vh;
position: relative;
overflow: hidden;
background: #0ff;
}
.box .divBox {
width: 100%;
height: 100%;
display: flex;
}
.box .divBox .div{
width: 25%;
height: 100%;
background: #ff4860;
}
.box .divBox .div:nth-child(1){
transform: translate(0,0);
transition: 0.3s;
}
.box .divBox .div:nth-child(2){
transition: 0.6s;
transform: translate(0,0);
}
.box .divBox .div:nth-child(3){
transition: 0.9s;
transform: translate(0,0);
}
.box .divBox .div:nth-child(4){
transition: 1.2s;
transform: translate(0,0);
}
.content {
width: 100%;
height: 100%;
position: absolute;
background: #fff;
color: #286286;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translate(0,0);
transition: 1.5s;
}
.content .title {
font-size: 3rem;
padding: 25px 0;
}
.content .info {
font-size: 1.2rem;
padding: 0 15px 25px 15px;
text-align: center;
}
.content .btn {
padding: 12px 20px;
border-radius: 50px;
border: 2px solid #286286;
color: #286286;
outline: none;
transition: 0.3s;
}
.content .btn:hover {
color: #fff;
background: #286286;
cursor: pointer;
}
.box:hover .content {
transform: translate(0,-100%);
}
.box:hover .div:nth-child(1) {
transform: translate(0,-100%);
}
.box:hover .div:nth-child(2) {
transform: translate(0,-100%);
}
.box:hover .div:nth-child(3) {
transform: translate(0,-100%);
}
.box:hover .div:nth-child(4) {
transform: translate(0,-100%);
}
11.60 GEEK