- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Маска при наведении, шаг 2</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="shape techmart">
<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: 20px;
}
.shape {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background-color: #ffffff;
}
.shape .details {
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 {
}
.shape:hover .details {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
- Скройте блок
.shape .detailsс помощьюdisplay: none. - Блоку
.shapeс классом.techmartприсвойте неповторяющееся фоновое изображение с адресомtechmart.jpgи позицией фона30% 0%. - В правило
.shape:hover .detailsдобавьте свойствоdisplay: block.