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

  On 14.06.2017 at 16:31, a!max said:

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

 

  On 14.06.2017 at 16:38, Silence said:

.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

  On 14.06.2017 at 17:41, a!max said:

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

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

  On 14.06.2017 at 17:45, Silence said:

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

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

  On 14.06.2017 at 17:48, a!max said:

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

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

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

 

  On 14.06.2017 at 17:54, Silence said:

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

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

 

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

  On 14.06.2017 at 17:59, a!max said:

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

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

  On 14.06.2017 at 18:02, Silence said:

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

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