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

Решение, как сделать эффект увеличения фоновой картинки при наведении на 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%}