Вывод дочерних элементов. Тип 1. CSS
Стили CSS:
.grid_item_style_1 {
margin-bottom: 20px;
}
.grid_item_style_1 a {
display: block;
position: relative;
height: 240px;
text-align: center;
text-decoration: none;
font-family: "Roboto";
font-size: 20px;
color:inherit;
-webkit-background-size: cover;
background-size: cover;
background-position: 50%;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.14);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.14);
border-radius: 4px;
}
.grid_item_style_1 a span {
display: inline-block;
width: 100%;
position: absolute;
bottom: 10px;
left:0;
padding: 5px 0 7px;
background-color: rgba(255, 255, 255, 0.7);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.grid_item_style_1 a:hover span{
bottom:30px;
background-color: rgba(255, 255, 255, 0.95);
}Результат:
Способ поблагодарить автора сайта:
Комментарии (0)
Не писать ответ