Hover Animation (Card Animation) Part 13

Опубликовано: 09 Январь 2022
на канале: 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;
}

Смотрите видео Hover Animation (Card Animation) Part 13 онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Masters In Web Design 09 Январь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 12 раз и оно понравилось 1 людям.