максимальная высота не работает для div скольжения снизу - PullRequest
Новая
       18

максимальная высота не работает для div скольжения снизу

0 голосов
/ 06 июня 2019

Я хочу создать сайт с несколькими изображениями.Когда пользователь наводит курсор на изображение, из нижней части страницы выскользнет div с некоторой информацией об изображении.Аналогично этой странице: https://bewegen.com/en/bike-share-network

Это то, что у меня сейчас есть:

https://jsfiddle.net/ugto4sr5/4/

.box {
  width: 20rem;
  height: 20rem;
  background-color: red;
  position: absolute;
  bottom: 0;
  overflow-y: hidden;
  max-height: 0rem;/* approximate max height */
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: in-ease-out;
}

img:hover+.box {
  max-height: 30rem;
}
<img src="https://assets.pernod-ricard.com/nz/media_images/test.jpg?hUV74FvXQrWUBk1P2.fBvzoBUmjZ1wct" alt="" height=3 0 width=3 0>
<div class="box">
</div>

Работает как надо, но если я скопирую код в свой файл и запустите его.Максимальная высота не работает, она остается равной 20 бэр, пока я не завис.

...