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

Властивість <mark style="background-color:red;">overflow</mark> визначає, як поводить себе контент елемента, який не вміщується в його внутрішню область (content box). Значення <mark style="background-color:red;">overflow</mark> вказує, чи потрібно відображати прокрутку для видимості контенту, який не умістився у блок чи приховувати.

```css
overflow: visible | hidden | scroll | auto
```

{% hint style="info" %}
Існують властивості <mark style="background-color:red;">overflow-x</mark> і <mark style="background-color:red;">overflow-y</mark>, які управляють переповненням тільки по горизонталі чи по вертикалі відповідно.
{% endhint %}

## Значення visible <a href="#znachennya-visible" id="znachennya-visible"></a>

<mark style="background-color:red;">**visible**</mark>**&#x20;(за замовчуванням):** Контент, що не вмістився буде видимий за межами елемента, і не буде обрізаний, навіть якщо він не вміщується у внутрішню область елемента.

{% embed url="https://codepen.io/khomiak/pen/JjxGQOE" %}

{% hint style="info" %}
Якщо зовні елемента є видимий контент, що його переповнює, цей контент не впливає на геометрію сусідніх елементів. (тобто буде накладення - саме тому у верстці уникають фіксованої висоти текстових блоків)
{% endhint %}

## Значення hidden <a href="#znachennya-hidden" id="znachennya-hidden"></a>

<mark style="background-color:red;">**hidden**</mark>**:** Контент, який не умістився буде обрізаний та прихований.

{% embed url="https://codepen.io/khomiak/pen/xxMZojg" %}

{% hint style="info" %}
При overflow: hidden; частина тексту - недоступна. Саме тому у верстці уникають фіксованої висоти текстових блоків.
{% endhint %}

## Значення scroll <a href="#znachennya-scroll" id="znachennya-scroll"></a>

<mark style="background-color:red;">**scroll**</mark>**:** Показує горизонтальну та/або вертикальну смугу прокрутки, навіть якщо вміщений контент поміщається всередині елемента. Якщо контент не вміщується, буде відображено смуги прокрутки.

{% embed url="https://codepen.io/khomiak/pen/abXdgjp" %}

## Значення auto <a href="#znachennya-auto" id="znachennya-auto"></a>

<mark style="background-color:red;">**auto**</mark>**:** Показує смуги прокрутки лише в тому випадку, якщо контент не вміщується. Якщо контент вміщується, смуги прокрутки не відображаються.

{% embed url="https://codepen.io/khomiak/pen/gOqPNdd" %}

## Заокруглення кутів зображення <a href="#zaokruglene-zobrazhennya" id="zaokruglene-zobrazhennya"></a>

Заокруглення кутів зображення можна досягти за допомогою властивості <mark style="background-color:red;">border-radius</mark>. Але для цього зображення потрібно помістити в контейнер (тумбу, обгортку).

Контейнеру задають властивість закруглення кутів  і приховують контент, який виходить за рамку <mark style="background-color:red;">overflow: hidden;</mark>. Саме зображення при цьому роблять блоковим елементом, а також використовують властивість <mark style="background-color:red;">object-fit</mark> зі значенням <mark style="background-color:red;">cover</mark>, щоб гарно спозиціонувати зображення.&#x20;

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

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

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

{% embed url="https://codepen.io/khomiak/pen/yLZONqx" %}

## Декоративний оверлей&#x20;

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

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

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

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

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

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

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

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

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

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

```css
.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 на наш контейнер - при наведенні курсора, щоб наш оверлей покривав контейнер.

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

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

```css
.image-container {
  overflow: hidden;
}
```

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

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

{% embed url="https://codepen.io/khomiak/pen/PoVNPme" %}

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

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

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

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

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

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

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

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

{% embed url="https://codepen.io/khomiak/pen/oNmxjbY" %}

