Пример:
HTML:
|
1 2 3 |
<div class="image-bg"> <span style="background-image: url('/image.jpg');"></span> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.image-bg { height: 300px; position: relative; } .image-bg span { background-position: center 0; background-repeat: no-repeat; background-size: cover; height: 300px; margin: 0 auto; position: absolute; left: 0; right: 0; width: 100%; transition: all 5s ease-out 0s; } .image-bg:hover span { background-position: center 100%; } |
Если нужно использовать для прокрутки не фон, а картинку <img>, то используем:
HTML:
|
1 2 3 |
<div class="image-img"> <img src="/image.jpg" /> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.image-img { height: 300px; position: relative; } .image-bg img { object-fit: cover; object-position: center top; height: 300px; margin: 0 auto; position: absolute; left: 0; right: 0; width: 100%; transition: all 5s ease-out 0s; } .image-bg:hover img { object-position: center bottom; } |
Результат точно такой же:
Здравствуйте, подскажите почему данные варианты не работают на Mac Safari, все остальные браузеры даже на маке отлично плавно отображают, а в Сафари всё происходит моментально, резко и без прокрутки?
Плавность делается свойством transition
В Safari с ним что то не так значит, к сожалению я проверить не могу.
Смотреть в эту сторону нужно, например вот тема
Как вариант, попробуйте поставить еще все префиксы для transition, такие как webkit, moz и т.д.