iNext10
@iNext10
Web Developing (Front End) Junior

Как можно сделать такой эффект при наведении?

Как сделать такой эффект при наведении на блоки как на этом сайте?

5ecf7dc25fd01959623222.png
  • Вопрос задан
  • 238 просмотров
Решения вопроса 3
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Если речь идёт об эффекте при наведении на общий блок, тогда так:

.element {
transition: transform 300ms ease;
}
.element:hover {
transform: translateY(-10px);
}


А если нужен эффект при наведении на картинки, тогда так:

.element {
position: relative;
}

.element:before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
border: 2px solid #fff;
box-shadow: 0 0 0 30px hsla(0,0%,100%,.2);
content: "";
opacity: 0;
transition: opacity .35s,transform .35s;
transform: scale3d(1.4,1.4,1);
}

.element:hover:before {
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
transform: scaleX(1);
opacity: 1;
}
Ответ написан
wapster92
@wapster92 Куратор тега CSS
Люблю трилогию ME
transform: translate
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы