Hover Animation (Card Animation) Part 13

Published: 09 January 2022
on channel: Masters In Web Design

How to make hover animation or card animation in CSS

/*CSS*/
@import url(https://fonts.googleapis.com/css?fami...

*,*::before, *::after{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Open Sans';
}
body{
width: 100%;
min-height: 100vh;
background: #2a585e;
}
.wrapper{
width: 580px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper .profile, .wrapper .info{
width: 50%;
float: left;
height: 290px;
position: relative;
overflow: hidden;
}
.wrapper .profile img{
width: 100%;
height: 100%;
}
.wrapper .profile .profile-details{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient( rgb(27, 152, 249, 90%), rgb(170, 124, 255, 90%) );
color: #FFF;
padding: 10%;
transition: left 0.5s ease-in-out;
}
.wrapper .profile .profile-details h3{
font-size: 22px;
font-weight: 700;
}
.wrapper .profile .profile-details span.designation{
font-size: 14px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
}
.wrapper .profile .profile-details span.divider{
display: block;
width: 100%;
height: 4px;
background: #FFF;
margin: 5% 0;
}
.wrapper .profile .profile-details p{
font-size: 14px;
text-align: justify;
}
.wrapper .profile .profile-details{
left: 100%;
}
.wrapper:hover .profile .profile-details{
left: 0;
}
.wrapper .info h1{
color: #2a585e;
position: absolute;
top: 10%;
left: 10%;
transition: top 0.4s ease-in-out;
}
.wrapper:hover .info h1{
top: 20%;
}
.wrapper .info span{
color: rgb(170, 124, 255, 90%);
position: absolute;
top: 60%;
left: 10%;
opacity: 0;
font-size: 12px;
font-weight: 700;
transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.wrapper:hover .info span{
top: 40%;
opacity: 1;
}

Watch video Hover Animation (Card Animation) Part 13 online, duration hours minute second in high quality that is uploaded to the channel Masters In Web Design 09 January 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 12 times and liked it 1 visitors.

653