0

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

<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;
}
2
  • Проверьте, пожалуйста, ещё раз отображение. На сколько я вижу, картинки округляются плавно, как написано у Вас в необходимом поведении элементов.
    – Denis640Kb
    29 фев 2020 в 16:26
  • Chrome, Moz, Edge, Yandex все корректно отображает. На твоей стороне какие-то проблемы. Ctrl + f5 или Сtrl + R в помощь.
    – Akkey2k
    3 мар 2020 в 8:49

1 ответ 1

1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.