Correctly style Image inside grid-auto-rows - css

Question

I'm working on a website splash page which should show rows of same height. Each row has a title and further text items and one image.
The text and image items should align at the bottom of each row as shown on following screenshot
On Hover, the image should slide up to max height which fits into the row.
My question is:
Can I access the current value of 1fr from parent row grid-auto-rows: 1fr;to give the image on hover a max height?
This is how my code currently looks like:
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>

Answer 1

You can make the image and its container to be height:100% of the row then consider a transform animation
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>