Мастерская: декоративные эффекты на CSS3 / Маска при наведении, шаг 3 [3/31]
×

Маска при наведении, шаг 3 [3/31]

На этом шаге создадим и применим к картинке маску нестандартной формы.

Для этого добавим в блок .shape ссылку, которая будет являться верхним слоем над всем контейнером и будет использоваться как маска. В качестве фона слоя-маски используем изображение в формате .svg с непрозрачными краями и прозрачным центром. Спозиционируем этот блок-маску абсолютно, чтобы он располагался поверх блока с текстовым описанием и контентной картинкой. Фоновая контентная картинка будет при этом проглядывать через прозрачную часть слоя-маски.

Также давайте немного оживим блок с маской и будем плавно изменять его форму при наведении с помощью трансформации масштабирования transform: scale.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <title>Маска при наведении, шаг 3</title> <meta charset="utf-8"> <base href="/assets/course76/"> </head> <body> <section class="shape techmarkt"> <div class="details"> <header>Техномаркт</header> <p>Сайт интернет-магазина строительных материалов и инстументов для ремонта: фиксированная вёрстка, спрайты, HTML5, CSS3.</p> <a class="button" href="#">Посмотреть</a> </div> </section> </body> </html>
CSS
html, body { margin: 0; padding: 0; font-size: 14px; font-family: "Helvetica Neue", "Helvetica", sans-serif; text-align: center; background-color: #161616; } section { display: inline-block; margin-top: 20px; } .shape { position: relative; width: 300px; height: 300px; background-color: #ffffff; overflow: hidden; } .shape .details { display: none; width: 310px; height: 310px; padding-top: 60px; color: #ffffff; background-color: rgba(75, 90, 120, 0.9); } .details header { display: block; padding-bottom: 10px; font-size: 26px; text-transform: uppercase; border-bottom: 1px solid #cccccc; } .details p { width: 70%; margin: 10px auto; line-height: 1.4; } .button { position: relative; z-index: 2; display: inline-block; padding: 5px 15px; margin-top: 15px; text-decoration: none; color: #ffffff; background-color: #2f3644; border-radius: 20px; } .button:hover { color: #2f3644; background-color: #ffffff; } .shape.techmarkt { background: url("techmarkt.jpg") no-repeat 30% 0%; } .shape:hover .details { display: block } .overlay { position: absolute; top: 0; left: 0; z-index: 1; width: 310px; height: 310px; font-size: 0; background-repeat: no-repeat; background-position: 0 0; outline: 0; transition: transform 0.6s ease-out; } .overlay.octagon { } .shape:hover .overlay { }
HTML Academy
  1. Добавьте в блок .shape ссылку с классом overlay.
  2. Для .overlay добавьте свойство transform: scale(1).
  3. Добавьте ссылке .overlay второй класс octagon.
  4. Правилу .overlay.octagon добавьте свойство background-image: url("oct.svg").
  5. В правило .shape:hover .overlay добавьте свойство transform: scale(1.07).

Проверьте эффект при наведении на блок .shape.

Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #10, который стартует 27 февраля.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.