a!max

Проблема с hover

В теме 9 сообщений

Здравствуйте. Почему при наведении на 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

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

Silence понравился пост

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


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

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

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

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

 

a!max понравился пост

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


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

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


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

 

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

Silence понравился пост

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


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

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

Silence понравился пост

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


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

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

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

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

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


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

Войти

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


Войти

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

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