Иногда нам нужно поставить большое по высоте изображение, чтоб оно смотрелось корректно, а само стояло в небольшом блоке. То здесь можно подключить прокрутку, которая будет прокручивать полностью картинку, только стоит навести на ее курсор. Теперь у веб мастера появилась возможность не сжимать изображение, а выставить его по своим данным, где для просмотра будет отличный обзор.
HTML
Код
<div class="dsantuk-odemub">
<div class="slopures-dungokas">
<span style="background-image: url('Сcылка на изображение');" class="lkods-amudes"></span>
</div>
</div>
CSS
Код
.slopures-dungokas {
height: 285px;
position: relative;
}
.slopures-dungokas .lkods-amudes {
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
height: 285px;
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
width: 100%;
transition: all 7s ease-out 0s;
}
.slopures-dungokas:hover .lkods-amudes {
background-position: center 100%;
}
.dsantuk-odemub {
width: 47%;
}
Если кратко, то вообщем так, берем изображение, которое изначально имеет большой размер по вертикали, а необходимо его поместить в небольшой блок, который явно не подходит по высоте. То здесь все просто, его можно прокручивать при наведении мыши.
Демонстрация
