0

Требуется анимация зума картинки при ховере. Мой способ, описанный ниже, работает во всех браузерах кроме сафари. На сафари оно работает как на видео: https://drive.google.com/file/d/1MWCynYB64jxXPYpYaa3LkplrwWGf1Xko/view

Единственный совет, который я получил - убрать transition, но мне нужно чтоб анимация происходила плавно

HTML

<div class="item">
   <div class="img-wrapper">
     <img class='img'>  
   </div>
 </div>

CSS

.img-wrapper {
  width: 220px;
  height: 220px;
  border: solid 8px #ffffff;
  border-radius: 110px;
  overflow: hidden;
}
.img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 110px;
}
.item:hover .img-wrapper img {
  transform: scale(1.1);
}
4
  • Странно, что оно у вас вообще работает. У вас для transition не указаны ни свойство, которое вы хотите анимировать, ни тайминг-функция.
    – Hikikomori
    17 июл 2018 в 9:41
  • @Hikikomori ваш комментарий мало помогает делу
    – stdnik
    17 июл 2018 в 9:45
  • Это вам был намек попробовать указать недостающие параметры, и посмотреть на результат.
    – Hikikomori
    17 июл 2018 в 9:47
  • @Hikikomori это вам был намек что это не поможет
    – stdnik
    17 июл 2018 в 9:53

2 ответа 2

0

Попробуйте добавить префикс для Safari и к картинке

-webkit-

.item:hover .img-wrapper img {
  -webkit-transform: -webkit-scale(1.1);
}
2
  • Префикс добавляется сборщиком, и проблема присутствует несмотря на префикс
    – stdnik
    17 июл 2018 в 9:55
  • Всё очень просто (похоже)! Увеличьте бордер радиус до 50% (вместо 110px) 17 июл 2018 в 10:08
0

Проблема была исправлена заменой transform: scale(1.1) на это:

width: 110%
height: 110%
margin-left: -5%
margin-top: -5%

Ваш ответ

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

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