Зависание Hover

Question

Возникла проблема: при наведении на картинку она должна плавно округляться, но вместо этого при наведении проходит пол секунды и она округляется сразу. В чем ошибка?

<body>
    <header class="topMenu">
        <div class="menu">
            <img src="image/img1.jpg" alt="">
        </div>
        <div class="menu">
            <img src="image/img2.jpg" alt="">
        </div>
        <div class="menu">
            <img src="image/img3.jpg" alt="">
        </div>
   </header>
</body>

.menu{
    width: 150px;
    height: 100px;
    float: left;
    padding-right: 5px;

}
.menu img:hover{
    -webkit-transform: scale(1.01);
    -ms-transform: scale(1.01);
    transform: scale(1.01);
    border-radius: 50%;

}

.menu img {
    max-width: 100%;
    transition: 0.5s;
}

Answer 1

У меня всё работает отлично, возможно вам следует увеличить transition, например сделать так:

.menu img {
    max-width: 100%;
    transition: 1s;
}

или вообще вот так:

.menu img {
    max-width: 100%;
    transition: 5s;
}

Если ничего не работает, то пожалуйста напишите какой у вас браузер

Answer 2

Добавьте к стилю .menu img border: 1px solid transparent; и все у вас заработает. Скорее всего у Вас Firefox так отрисовывал анимация. В общем, добавив прозрачный бордер, он (бордер) в дальнейшем будет анимироваться как Вы хотели во всех браузерах поддерживающих анимацию.

.menu img {
  max-width: 100%;
  transition: 0.5s;
  border: 1px solid transparent;
}

БЛОГ НА HUSL

Зависание Hover

Ответы (2 шт):