Верстаю макет из psd
На первой картинке простое состояние блока а на второй hover
.
Как при наведении мыши сделать выезжающий оранжевый блок.
-
Недавно был такой же вопрос, но его невозможно отыскать, так как там тоже присутствовала картинка в вопросе. Отличия того вопроса от этого: там по клику "выезжал" зеленый блок.– user25682428 июл 2019 в 5:02
-
а как просто создать такой блок– btcfakir28 июл 2019 в 5:06
Добавить комментарий
|
1 ответ
Если именно hover, а не клик - можно (нужно) без JS.
Главная использованная фишка: .класс1:hover .класс2 {...}
— при наведении на класс1, отыскать где-то внутри него класс2 и что-то с ним сделать.
( Fiddle )
.block { /* Внешний блок */
display: inline-block;
vertical-align: top;
cursor: pointer;
box-shadow: 1px 1px 5px #123;
margin: 10px;
}
.icon-block { /* блок с картинкой и скрытым описанием */
position: relative;
line-height: 0; /* чтобы не было пробела под картинкой */
}
.icon-block * {
line-height: normal;
}
.name { /* название картинки */
text-align: center;
font-size: 18px;
padding: 10px 0;
transition: 0.3s linear;
}
.hidden { /* Скрытое описание */
width: 100%;
height: 0; /* за счет этого */
overflow: hidden; /* и этого */
transition: 0.3s linear;
position: absolute;
bottom: 0; /* прилипнет внизу */
background-color: #f36700;
color: white;
box-sizing: border-box; /* не будет сюрпризов от padding */
padding: 0 5px;
}
.block:hover .hidden {
height: 50px;
padding: 5px;
}
.block:hover .name {
color: #f36700;
}
<div class="block">
<div class="icon-block">
<img class="icon" src="https://gyazo.com/a9219ec9f23cf9420048220a58d288cf.png">
<div class="hidden">Урон: 50;<br>Здоровье: 150;</div>
</div>
<div class="name">Cheburashikus Majoris</div>
</div>
<div class="block">
<div class="icon-block">
<img class="icon" src="https://gyazo.com/92a8f48263dacbbd91628c4755ca9b0d.png">
<div class="hidden">Урон: 100;<br>Здоровье: 100;</div>
</div>
<div class="name">Mimimi</div>
</div>