Властивість overflow

Властивість overflow визначає, як поводить себе контент елемента, який не вміщується в його внутрішню область (content box). Значення overflow вказує, чи потрібно відображати прокрутку для видимості контенту, який не умістився у блок чи приховувати.

overflow: visible | hidden | scroll | auto

Існують властивості overflow-x і overflow-y, які управляють переповненням тільки по горизонталі чи по вертикалі відповідно.

Значення visible

visible (за замовчуванням): Контент, що не вмістився буде видимий за межами елемента, і не буде обрізаний, навіть якщо він не вміщується у внутрішню область елемента.

Якщо зовні елемента є видимий контент, що його переповнює, цей контент не впливає на геометрію сусідніх елементів. (тобто буде накладення - саме тому у верстці уникають фіксованої висоти текстових блоків)

Значення hidden

hidden: Контент, який не умістився буде обрізаний та прихований.

При overflow: hidden; частина тексту - недоступна. Саме тому у верстці уникають фіксованої висоти текстових блоків.

Значення scroll

scroll: Показує горизонтальну та/або вертикальну смугу прокрутки, навіть якщо вміщений контент поміщається всередині елемента. Якщо контент не вміщується, буде відображено смуги прокрутки.

Значення auto

auto: Показує смуги прокрутки лише в тому випадку, якщо контент не вміщується. Якщо контент вміщується, смуги прокрутки не відображаються.

Заокруглення кутів зображення

Заокруглення кутів зображення можна досягти за допомогою властивості border-radius. Але для цього зображення потрібно помістити в контейнер (тумбу, обгортку).

Контейнеру задають властивість закруглення кутів і приховують контент, який виходить за рамку overflow: hidden;. Саме зображення при цьому роблять блоковим елементом, а також використовують властивість object-fit зі значенням cover, щоб гарно спозиціонувати зображення.

<div class="thumb">
  <img class="image" src="your-image.jpg" alt="Your Image">
</div>

.thumb {
  width: 200px; /* Ширина контейнера */
  height: 200px; /* Висота контейнера */
  overflow: hidden; /* Обрізати контент, який виходить за межі контейнера */
  border-radius: 20px; /* Заокруглені кути контейнера */
}

.image {
  width: 100%; /* 100% ширина відносно батьківського контейнера */
  height: 100%; /* 100% висота відносно батьківського контейнера */
  object-fit: cover; /* Збільшує або зменшує зображення, щоб воно повністю вписувалося в контейнер */
  display: block; /* Робимо зображення блоковим елементом */
}

Декоративний оверлей

Декоративний оверлей - це графічний елемент, який накладається на зображення або відео, щоб змінити його вигляд або надати йому ефект. Цей елемент може бути використаний для створення темної або світлої тіні, додавання тексту або інших графічних ефектів.

Часто на сайтах зустрічається такий ефект: випливання згори зображення якогось додаткового шару із написом тощо. Для цього створюють цей шар і зміщують його за межі видимості контейнера (тумби, обгортки), а при наведенні курсора показують його в видимій області контейнера. Повторимо цей ефект.

У розмітці в контейнер поміщаємо зображення, а також на одному рівні із ним - додатковий <div> який буде виконувати роль оверлея.

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image" class="image">
  <div class="overlay">
    <div class="text">Ваш текст тут</div>
  </div>
</div>

Тепер потрібно задати розміри нашому контейнеру і відносне позиціювання, щоб позиціювати нащадків відносно нього.

.image-container {
  position: relative;
  width: 300px; /* ширина контейнера */
  height: 200px; /* висота контейнера */
}

Потім потрібно спозиціонувати і саме зображення, як було описано вище при розгляді скруглених кутів у зображення.

.image {
  width: 100%; /* 100% ширина відносно батьківського контейнера */
  height: 100%; /* 100% висота відносно батьківського контейнера */
  object-fit: cover; /* Збільшує або зменшує зображення, щоб воно повністю вписувалося в контейнер */
  display: block; /* Робимо зображення блоковим елементом */
}

Тепер позиціюємо наш оверлей:

• Робимо абсолютне позиціювання

• задаємо висоту і ширину 100% від батьківського контейнера

• щоб побачити оверлей робимо його з напівпрозорою заливкою

• задаємо за допомогою FlexBox розташування його контенту

• і найголовніше - задаємо йому позицію. В даному разі зсунемо на значення висоти контейнера вниз. Таким чином він розміститься абсолютно одразу під основним контейнером.

.overlay {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* темний оверлей з прозорістю */
  display: flex;
  justify-content: center;
  align-items: center;
}

Тепер додамо ефект :hover на наш контейнер - при наведенні курсора, щоб наш оверлей покривав контейнер.

.image-container:hover .overlay {
   top: 0; 
}

Оверлей все ще лишається видимим під контейнером, коли курсор не наведено, тому контейнеру додамо властивість, щоб контент, який виходить за його межі - приховувався.

.image-container {
  overflow: hidden;
}

Додамо також стилізацію тексту всередині оверлея.

.text {
  color: white; /* колір тексту */
  font-size: 24px; /* розмір тексту */
}

Ефект чудово працює. Тільки шар оверлей різко з'являється. А хотілось би, щоб він плавно випливав. Для цього зробимо певний рефакторинг. Додамо трансформацію і переходи.

Ці налаштування розглядаються далі в матеріалах. Зараз просто сприймемо це як додаткове налаштування.

Зробимо зміни в позиціювання оверлея. Спозиціонуємо відносно верхнього лівого кута. А також за допомогою трансформації змістимо по вертикалі на 100%. І додамо перехід.

.overlay {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateY(100%);
  transition: transform 250ms ease;
}

При наведенні курсора наш овердей буде зсовуватись вгору на 100% батьківського контейнера.

.image-container:hover .overlay {
  transform: translateY(0);
}

І ось що у нас вийшло: