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