Простий приклад галереї на семантичних тегах – частина 2

Продовжимо доопрацювання нашого прикладу галереї, який ми почали у попередній публікації під назвою  Простий приклад галереї на семантичних тегах – частина 1.

HTML код ми залишаємо без змін, а от  CSS код ми дещо вдосконалимо.

Нам потрібно, щоб при наведенні курсору мишки на зображення, воно збільшувалося разом з підписом, а інші зображення навпаки зменшувалися.

/* Задаємо базові стилі для всіх елементів: без відступів, розмір шрифту адаптивний до ширини вікна, і установлюємо box-sizing для правильного розрахунку розмірів */
* {
margin:0; font-size: calc(0.5em + 1vw); box-sizing: border-box;
 }

/* Стилізуємо тег <main>: ширина 100% від контейнера, використання сітки для вмісту, колонки рівної ширини, відстань між елементами, і внутрішні відступи */
main {
width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; padding: 1em;
}

/* Стилі для зображень усередині тега <figure> займають 100% ширини і висоти свого контейнера, а також адаптовані за розміром */
figure img {
width: 100%; height: 100%; object-fit: cover;
}

/* Стилі для тега <figcaption>: фоновий колір, центрований текст, і висота лінії для кращої читабельності */
figcaption {
background-color: #bfffbf; text-align: center; line-height: 2em;
}

/* Додаємо плавну анімацію до всіх елементів <figure> */
figure { 
transition: all 0.4s linear; 
}

/* Стилі для елемента <figure>, який містить зображення, при наведенні курсору миші: збільшення розміру */
figure:has(img:hover) {
scale: 1.5; 
}

/* Стилі для всіх елементів <figure> в <main>, крім того, на який наведено курсор: зменшення розміру і зниження прозорості */
main:has(img:hover) figure:not(:hover){
  scale: .5;
  opacity: 0.5;  
}

 

При наведенні курсору зображення збільшується

При наведенні курсору зображення збільшується

Переглянути робочий приклад в онлайн редакторі коду «Practice».

Таким чином ми оживили нашу галерею. CSS код містить детальні пояснення, якщо виникнуть питання пишіть у коментарях.

Залишити відповідь