Стилі для сторінки

До завдання

3. Стилі для зображень

.figure - Контейнер для зображень з підписами. 
                
CSS

                
/* Стилі для блоків з зображеннями */
.figure {
    display: inline-block; /* Блоково-рядковий елемент */
    margin: 20px 0; /* Відступи зверху та знизу */
    text-align: center; /* Вирівнювання по центру */
    padding: 10px; /* Відступи всередині */
    background: #F0F8FF; /* Колір фону */
    border: 5px outset #f8faff; /* Рамка */
    border-radius: 20px; /* Закруглені кути */
}

/* Стилі для зображень у блоках */
.figure-img {
    max-width: 80%; /* Максимальна ширина */
    border-radius: 20px; /* Закруглені кути */
    margin-bottom: 8px; /* Відступ знизу */
}

/* Стилі для підписів до зображень */
.figure-caption {
    font-style: italic; /* Курсив */
    color: #666; /* Колір тексту */
    font-size: 0.9em; /* Розмір тексту */
    background-color:  #f8faff;;  /* Колір фону */
}
Використовується для оформлення портретів та інших зображень.
.frame-hover - Ефект при наведенні на зображення. 
                
CSS

                
/* Стилі для рамок при наведенні */
.frame-hover {
    border: 5px outset transparent; /* Прозора рамка */
    padding: 5px; /* Відступи всередині */
    transition: all 0.3s ease; /* Плавні анімації */
}

/* Ефект при наведенні на рамку */
.frame-hover:hover {
    border-color: #3498db; /* Колір рамки */
    box-shadow: 0 5px 15px rgba(52,152,219,0.3); /* Тінь */
}
Приклад використання:
                
HTML

                
<figure class="figure">
    <img src="img/Poet.png" class="figure-img frame-hover" alt="Портрет сучасного українського поета">
    <figcaption class="figure-caption">РІВ</figcaption>
</figure>