При нажатии на картинку выезжает блок css/js [дубликат]

103

28 апреля 2021, 13:40

На этот вопрос уже дан ответ здесь:

Появление текста и эффектов при наведении на блок (1 ответ)

Закрыт 1 год назад.

Верстаю макет из psd На первой картинке простое состояние блока а на второй hover. Как при наведении мыши сделать выезжающий оранжевый блок.

Answer 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>