Правильно стиль изображения внутри сетки-авто-строк - PullRequest
Новая
       5

Правильно стиль изображения внутри сетки-авто-строк

0 голосов
/ 30 марта 2020

Я работаю над страницей spla sh, на которой должны отображаться строки одинаковой высоты. Каждая строка имеет заголовок, дополнительные текстовые элементы и одно изображение. Элементы текста и изображения должны быть выровнены внизу каждой строки, как показано на следующем снимке экрана

enter image description here

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

Мой вопрос: Могу ли я получить доступ к текущему значению 1fr из родительской строки grid-auto-rows: 1fr;, чтобы дать изображению при наведении курсора максимальную высоту?

Вот так выглядит мой код: 

html, body {margin:0; padding:0}

.jumbo {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-auto-rows: 1fr;
}

.jumbo__item {
  position: relative;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
  font-size: 20vh;
  padding: 0 0 0 10px;
  #overflow: hidden;
}

.jumbo__rowtags{
  position: absolute;
  bottom: 0;
  right: 0;
}

.jumbo__tag {
  margin-right: 10px;
  display: inline-block;
  background: white;
  vertical-align: bottom;
  height: 30px;
  padding: 0 10px;
  font-size: 20px;
  line-height: 30px;
}

.jumbo__tag-high{
  height: 30px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.jumbo__tag-high:hover{
  height: auto;
  max-height: 200px;
}

.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}
<div class="jumbo">
  <div class="jumbo__item a">
    Dogs
  </div>
  <div class="jumbo__item b">
    and
    <section class="jumbo__rowtags">
      <span class="jumbo__tag jumbo__tag-high"><img src="https://placeimg.com/350/200/nature"></span>
      <span class="jumbo__tag">Hello</span>
      <span class="jumbo__tag">World</span>
    </section>
  </div>
  <div class="jumbo__item c">
    cats
  </div>
</div>

1 Ответ

1 голос
/ 30 марта 2020

Вы можете сделать изображение и его контейнер height:100% строки, а затем рассмотреть анимацию преобразования 

html, body {margin:0; padding:0}

.jumbo {
  width: 100%;
  height: 100vh;
  background: yellow;
  display: grid;
  grid-auto-rows: 1fr;
}

.jumbo__item {
  position: relative;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.75);
  font-size: 20vh;
  padding: 0 0 0 10px;
  #overflow: hidden;
}

.jumbo__rowtags{
  position: absolute;
  bottom: 0;
  right: 0;
  top:0; /* added */
  
}

.jumbo__tag {
  margin-right: 10px;
  display: inline-block;
  background: white;
  vertical-align: bottom;
  height: 30px;
  padding: 0 10px;
  font-size: 20px;
  line-height: 30px;
}

.jumbo__tag-high{
  height: 100%; /* added */
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.jumbo__tag-high img {
   height:100%; /* added */
   transform:translateY(calc(100% - 30px));
   transition:1s all;
}

.jumbo__tag-high:hover img{
   transform:translateY(0%);
}

.a {background: lightblue; }
.b {background: lightgreen}
.c {background: lightgrey}
<div class="jumbo">
	  <div class="jumbo__item a">
	    Dogs
	  </div>
	  <div class="jumbo__item b">
	    and
	    <section class="jumbo__rowtags">
	      <span class="jumbo__tag jumbo__tag-high"><img src="https://placeimg.com/350/200/nature"></span>
	      <span class="jumbo__tag">Hello</span>
	      <span class="jumbo__tag">World</span>
	    </section>
	  </div>
	  <div class="jumbo__item c">
	    cats
	  </div>
	</div>
...