• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Большого изображение с прокруткой на CSS (Прокрутка большого изображения внутри небольшого блока)
Большого изображение с прокруткой на CSS
Kosten
Дата: Воскресенье, 2018-12-30, 22:10 | Сообщение 1
Администраторы
Сообщений:19239
Награды: 56


Иногда нам нужно поставить большое по высоте изображение, чтоб оно смотрелось корректно, а само стояло в небольшом блоке. То здесь можно подключить прокрутку, которая будет прокручивать полностью картинку, только стоит навести на ее курсор. Теперь у веб мастера появилась возможность не сжимать изображение, а выставить его по своим данным, где для просмотра будет отличный обзор.

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%;
}


Если кратко, то вообщем так, берем изображение, которое изначально имеет большой размер по вертикали, а необходимо его поместить в небольшой блок, который явно не подходит по высоте. То здесь все просто, его можно прокручивать при наведении мыши.

Демонстрация
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Большого изображение с прокруткой на CSS (Прокрутка большого изображения внутри небольшого блока)
  • Страница 1 из 1
  • 1
Поиск: