Card Hover Effect

Title : CSS Card Animated Hover Effect | 2021 | CSS Tutorial

HTML :

<!DOCTYPE html>

<head>

<title>Image Hover Effect</title>

</head>

<body>

</div>

<p class="title">Title</p>

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>

</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 {