• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Большого изображение с прокруткой на CSS (Прокрутка большого изображения внутри небольшого блока)
Большого изображение с прокруткой на CSS
Kosten
Воскресенье, 30 Декабря 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Иногда нам нужно поставить большое по высоте изображение, чтоб оно смотрелось корректно, а само стояло в небольшом блоке. То здесь можно подключить прокрутку, которая будет прокручивать полностью картинку, только стоит навести на ее курсор. Теперь у веб мастера появилась возможность не сжимать изображение, а выставить его по своим данным, где для просмотра будет отличный обзор.

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)
Форум » Web-Раздел » Начинающему вебмастеру » Большого изображение с прокруткой на CSS (Прокрутка большого изображения внутри небольшого блока)
  • Страница 1 из 1
  • 1
Поиск: