Эффект наведения на карточку профиля с переходами на соцсети с помощью CSS
Эффект наведения на карточку профиля — это не просто визуальный прием, а настоящий инструмент взаимодействия с пользователем. В этом примере реализована анимация, позволяющая элегантно выделить информацию при наведении курсора.
Особенность этого эффекта в том, что при наведении пользователь видит ссылки на социальные сети, связанные с профилем. Это делает карточку не только стильной, но и функциональной.
Код написан исключительно с использованием CSS, что гарантирует высокую производительность и универсальность для любых веб-проектов. Вы можете легко адаптировать его под собственный стиль и интегрировать в дизайн сайта.
Погрузитесь в мир современных интерфейсов с этим лаконичным и стильным решением!
See the Pen Profile Card Hover Effect by Anton Rikhnovets (@rikhnovets) on CodePen.
HTML
<div class="wrap">
<div class="card">
<div class="card-liner">
<figure><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQH3NLvkfzhnfq74VDugUYvunFUX52LigpzA&s" alt="" /> </figure>
<div class="card--social">
<ul>
<li class="twitter"><a href="#0"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#0"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="card--title">
<h3>Colin McGraw</h3>
<p>Web Developer</p>
</div>
<div class="card--desc">
<hr />
<p>Coffee, code, repeat... he doesn't eat food, and only stops to defend the table tennis crown.</p>
</div>
<div class="card--btn">
<a href="#0">
<span class="moreinfo"><i class="fa fa-info-circle"></i> More Info</span>
<span class="fullprof">View Full Profile</span>
</a>
</div>
</div>
</div>
</div>
<footer class="cred">
<a href="https://dribbble.com/shots/2134672-Card-animation">
Inspiration from Alex Cican on Dribble
<i class="fa fa-share"></i>
</a>
</footer>
CSS
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: "Hind";
color: #676767;
background: #fbfbfb;
cursor: default;
}
.wrap {
max-width: 20em;
margin: 3em auto;
}
.card {
background: #fff;
border: 1px solid #eee;
transition: all 0.35s ease;
}
.card:hover {
border-color: #ddd;
box-shadow: rgba(10, 145, 145, 0.1) 0 0 5em;
}
.card:hover figure {
transform: scale(0.6) translateY(-1.4em);
}
.card:hover .card--title {
transform: translateY(-5em);
}
.card:hover .card--desc {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition-duration: 0.4s;
}
.card:hover .card--desc p {
opacity: 1;
}
.card:hover .card--desc hr {
transition-delay: 0.1s;
transform: scale(1, 1);
}
.card:hover .card--social li {
opacity: 1;
transition-duration: 0.3s;
transition-delay: 0.1s;
transform: translate(0, 0) rotate(0deg);
}
.card:hover .card--btn a {
background: #fbfbfb;
border-color: #ddd;
}
.card:hover .card--btn .moreinfo {
opacity: 0;
transform: translateY(-50px);
}
.card:hover .card--btn .fullprof {
opacity: 1;
transform: translateY(0);
}
.card figure {
position: relative;
z-index: 299;
width: 10em;
height: 10em;
margin: 0 auto 1em;
border-radius: 50%;
overflow: hidden;
border: 1px solid #eee;
padding: 4px;
transform-origin: center top;
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card figure img {
width: 100%;
display: block;
border-radius: 50%;
}
.card-liner {
position: relative;
overflow: hidden;
padding: 2em;
}
.card--title {
text-align: center;
line-height: 1;
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--title h3 {
margin: 0 0 0.4em;
font-size: 1.4em;
}
.card--title p {
margin: 0 0 5em;
color: #a5a5a5;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 2.2px;
}
.card--desc {
position: absolute;
top: 53.5%;
left: 9%;
width: 82%;
text-align: center;
padding-bottom: 0.8em;
visibility: hidden;
opacity: 0;
transform: translateY(3em);
transition: all 0.02s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--desc p {
margin: 0 0 0.5em;
font-weight: 300;
opacity: 0;
transition: all 0.55s ease 0.1s;
}
.card--desc p span {
text-decoration: line-through;
}
.card--desc hr {
border: none;
width: 3em;
margin: 0 auto 0.75em;
height: 3px;
background: #0a9191;
transform: scale(0, 1);
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.05s;
}
.card--btn {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.card--btn a {
position: relative;
overflow: hidden;
display: block;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
font-size: 0.8em;
color: #a5a5a5;
padding: 1.4em 2em;
border-top: 1px solid #eee;
letter-spacing: 0.5px;
transition: all 0.4s ease;
}
.card--btn a .fullprof {
display: block;
opacity: 0;
color: #0a9191;
transform: translateY(50px);
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn a .moreinfo {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.4em;
opacity: 1;
transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--btn a .moreinfo i {
margin-right: 5px;
}
.card--social {
position: absolute;
top: 3em;
left: 0;
width: 100%;
}
.card--social ul {
list-style: none;
margin: 0;
padding: 2em;
position: relative;
}
.card--social li {
display: block;
text-align: center;
position: absolute;
top: 0;
opacity: 0;
transition: all 0.02s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.card--social li.twitter {
left: 72%;
transform: translate(-200%, 1em) scale(0.7);
}
.card--social li.linkedin {
right: 72%;
transform: translate(200%, 1em) scale(0.7);
}
.card--social a {
line-height: 2.4;
display: block;
width: 2.3em;
height: 2.3em;
border-radius: 50%;
border: 1px solid #ccc;
background: #fbfbfb;
color: #0a9191;
text-decoration: none;
transition: all 0.3s ease;
}
.card--social a:hover {
background: #eee;
}
.cred {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background: #fff;
border-top: 1px solid #eee;
text-decoration: none;
}
.cred a {
display: block;
padding: 1em;
text-decoration: none;
color: #ccc;
font-weight: 300;
font-size: 0.9em;
letter-spacing: 0.5px;
}
.cred a i {
margin-left: 10px;
}
profile-card-hover-effect.zip
0
14.91 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
