Проблема с hover

[a!max]

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

[Silence]

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);
}

 

[a!max]

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

[Silence]

2 минуты назад, a!max сказал:

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

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

[a!max]

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]

3 минуты назад, a!max сказал:

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

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

[a!max]

2 минуты назад, Silence сказал:

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

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