0

Здравствуйте. Есть блок с фиксированной высотой и overflow: auto, и контент в этот блок полностью не влезает. его возможно прокручивать.

Каким образом добавить что-то вроде плавности скрытия той части контента которая не влезает. Что бы его плавно обрезало?

Буду благодарен за помощь.

Пример моего блока

.image-filter {
	display: inline-block;
	width: 160px;
	height: 150px;
	overflow-x: auto;
}
<div class="image-filter">
  <img src="http://apisplus.by/gallery/photos_tovar/322/small_shop_items_catalog_image1613.png">
</div>

2 ответа 2

1

Вот вариант с наложением градиента:

.image-wrapper {
  position: relative;
  width: 160px;
  height: 150px;
}
.image-filter {
	display: inline-block;
	width: 160px;
	height: 150px;
	overflow-x: auto;
}
.image-wrapper:after {
    content: ' ';
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
    position: absolute;
    bottom: 0;
    height: 30px;
    width: 100%;
}
<div class="image-wrapper">
  <div class="image-filter">
    <img src="http://apisplus.by/gallery/photos_tovar/322/small_shop_items_catalog_image1613.png">
  </div>
</div>

0

если я вас правельно понял:

.image-filter {
	display: inline-block;
	width: 160px;
	height: 150px;
	overflow-x: auto;
  background-image:url(http://apisplus.by/gallery/photos_tovar/322/small_shop_items_catalog_image1613.png);
  background-repeat: no-repeat;
  box-shadow: inset 0px -18px 20px 0px #FFF;
}
<div class="image-filter">
</div>

1
  • да, вы поняли правильно. но нужно чтобы изображение вставлялось не через css, а в html как было изначально у меня. так возможно переделать?
    – iKey
    16 янв 2018 в 11:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.