Перейти к содержанию
a!max

Проблема с hover

Рекомендуемые сообщения

Здравствуйте. Почему при наведении на 3 блок, нижние 2 блока смещаются резко вниз?
В чем моя ошибка?
Ссылка на архив с сайтом: https://yadi.sk/d/DaMKfImK3K8DiF

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, a!max сказал:

Здравствуйте. Почему при наведении на 3 блок, нижние 2 блока смещаются резко вниз?
В чем моя ошибка?
Ссылка на архив с сайтом: https://yadi.sk/d/DaMKfImK3K8DiF

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
    margin-top: 28px;
}

измени на:

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
}

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Silence сказал:

.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
    margin-top: 28px;
}

измени на:


.blocks:hover {
    box-shadow: 0 0 18px rgba(0,0,0,0.3);
}

 

Я знаю, что без margin будет работать, ведь я сначала box-shadow делал ^_^
Но нельзя просто так выкинуть свойство margin, мне нужен этот эффект "подпрыгивания/перемещения"
Какой-то трабл наверно с float

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, a!max сказал:

Я знаю, что без margin будет работать, ведь я сначала box-shadow делал ^_^
Но нельзя просто так выкинуть свойство margin, мне нужен этот эффект "подпрыгивания/перемещения"
Какой-то трабл наверно с float

Я не вижу разлику с margin  и  без margin ето просто hover efect

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, Silence сказал:

Я не вижу разлику с margin  и  без margin ето просто hover efect

Хочу, чтобы поднимались блоки на несколько пикселей, но вот почему мне интересно некоторые блоки ведут себя странно...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, a!max сказал:

Хочу, чтобы поднимались блоки на несколько пикселей, но вот почему мне интересно некоторые блоки ведут себя странно...

Попробуй вместо margin поставит ето:

    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
4 минуты назад, Silence сказал:

Попробуй вместо margin поставит ето:


    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);

 

Работает, но я так понимаю webkit это только для chrome?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, a!max сказал:

Работает, но я так понимаю webkit это только для chrome?

https://www.w3schools.com/css/css3_transitions.asp

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, Silence сказал:

Спасибо за ответ, теперь пойду спокойно спать ^_^

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×