Реализовать html-страницу с несколькими блоками текст + картинка.

Question

Реализовать html-страницу с несколькими блоками текст + картинка.

ruslan garalov Ученик (196), открыт 1 неделю назад

Реализовать html-страницу с несколькими блоками текст + картинка. Требования: • блок состоит из текста и картинки, которые делят доступную ширину поровну; - блок должен быть фиксированной высоты; • текст должен находиться посередине своей части; • картинка должна занимать всю свою часть по ширине и высоте; • картинка не должна выходить за пределы своей части; • при наведении мышкой на блок (текст + картинка): • он должен полностью покрыться полупрозрачной черной плашкой за 0.3 секунды; • картинка должна плавно (за 1 секунду) увеличиться, но при этом не выйти за пределы своей части. Изображения необходимо выбрать самостоятельно.

Answer 1

 <!DOCTYPE html> 
<html lang="ru"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Задание 3</title> 
    <style> 
        .container { 
            display: flex; 
            gap: 20px; 
            justify-content: center; 
            align-items: center; 
            margin-top: 50px; 
        } 
 
        .block { 
            width: 200px; 
            height: 200px; 
            position: relative; 
            overflow: hidden; 
            text-align: center; 
            background-color: #f0f0f0; 
        } 
 
        .block img { 
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            transition: transform 1s ease; 
        } 
 
        .block .text { 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            transform: translate(-50%, -50%); 
            font-size: 20px; 
            font-weight: bold; 
            color: #000; 
        } 
 
        .overlay { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background-color: rgba(0, 0, 0, 0); 
            transition: background-color 0.3s ease; 
        } 
 
        .block:hover .overlay { 
            background-color: rgba(0, 0, 0, 0.5); 
        } 
 
        .block:hover img { 
            transform: scale(1.1); 
        } 
    </style> 
</head> 
<body> 
    <div class="container"> 
        <div class="block"> 
            <img src="image1.jpg" alt="Image 1"> 
            <div class="overlay"></div> 
            <div class="text">HELLO, WORLD!</div> 
        </div> 
        <div class="block"> 
            <img src="image2.jpg" alt="Image 2"> 
            <div class="overlay"></div> 
            <div class="text">HELLO, WORLD!</div> 
        </div> 
        <div class="block"> 
            <img src="image3.jpg" alt="Image 3"> 
            <div class="overlay"></div> 
            <div class="text">HELLO, WORLD!</div> 
        </div> 
    </div> 
</body> 
</html>