@Aeternus_NPC

Как сделать анимацию для изображений?

Здравствуйте, помогите сделать что б при наведении на div над картинкой должен появиться сначала прозрачный цветной прямоугольник, совпадающий с ней по размеру, а затем его непрозрачность должна увеличиться до значения 0.8 – 0.9, а размер должен составлять 80% - 90%. Примерно по центру прямоугольника должен располагаться текст из атрибута data-title. При уведении курсора анимация должна плавно пропасть, как на рисунке. Также прилагаю свой код.
614d8b11b79fa685985428.jpeg
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated</title>
    <link rel="stylesheet" href="css/animated.css">
</head>
<body>
    <div class="container">
        <h2>PORTFOLIO</h2>
        <div class="row">
            <div class="pic" data-title="WOW Infographic"><img src="images/infographic.jpg" alt="info"></div>
            <div class="pic" data-title="Super Puper Web-Animation"><img src="images/web-animation.jpg" alt="web-animation"></div>
            <div class="pic" data-title="Mobile Application"><img src="images/mobile-app.jpg" alt="mobile-app"></div>
        </div>
    </div>
    
</body>
</html>
<code lang="css">
*, *::before, *::after
{ 
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    margin: 100px;
    padding-bottom: 0px;
    background-color: rgb(255, 255, 255);
  }
.container {
    width: 1200px;
    margin: auto;
    text-align: center;
  }
.container h2{
    padding-bottom: 20px;
    color: aliceblue;
}
.row {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-around;
}
.pic{
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.pic img{
    max-width: 350px;
    display: block;
}
</code>
  • Вопрос задан
  • 100 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега HTML
Нежно люблю верстку
Очень интересно, почему текст подписи вы считаете неконтентным, а картинку не имеющую смысла наоборот, контентной?
И с семантикой проблемы. Это ведь список, а не разрозненные div. А может ещё и ссылки на разделы портфолио.

Итого: список, в каждом элементе либо <a> либо <span> (буду называть текстовым блоком). Картинка псевдоэлементом.
Каждый элемент это грид в одну ячейку. (Раньше это делали абсолютами, теперь это не нужно) Внизу псевдо с картинкой, наверху текстовый блок
В начальном положении текст прозрачный, при наведении меняется.
Можно менять прозрачность всего блока или только фона.

Ответ написан
Комментировать
wapster92
@wapster92 Куратор тега HTML
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы