Масштабирование фонового изображения при наведении

Задача:

Как сделать эффект увеличения фоновой картинки при наведении на CSS


Масштабирование фонового изображения при наведении

Решение:
HTML
<div class="zoom_wrapper">
  <div class="zoom_block"></div>
</div>


CSS
.zoom_wrapper {
    width: 560px;
    height: 350px;
    overflow:hidden;
}
.zoom_block {
    width: 560px;
    height: 350px;
    background: url('https://webdevhelp.ru/upload/solutions/bg_zoom.jpg') center center;
    background-size: 100% 100%;
    transition: background-size .3s ease-in;
    -moz-transition: background-size .3s ease-in;
    -web-kit-transition: background-size .3s ease-in
}
.zoom_block:hover {background-size: 110% 110%}


Создано: 02.05.2018
Просмотров: 6