css - Sliding Boxes Growing in Height

Question

I am trying to get each individual box to slide up with content on hover but am unable to figure out how to the hover part to increase in height. So if the box was 350px x 350px and you hovered over it, it would increase in height to 650px x 350px to allow for a heading, text and a button. I have tried to increase the height based on :hover but tha obv didn't work.

Should I be using flex for this? Can I accomplish this with CSS? Can I use transition height on hover?

Does anyone have any suggestions as I am stumped.

Here is my code:

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
  box-sizing: border-box;
}

body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 3rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 17rem);
  gap: 2rem;
}

.item {
  position: relative;
  height: 19rem;
  background-color: lightGrey;
  overflow-y: hidden;
  box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
  margin: 0;
  display: block;
  background-color: turquoise;
  padding: 1rem;
}
.item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
  transform: translate3d(0, 0, 0);
}

img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  transition: transform 300ms;
  background-color: #82ebe0;
  transform: translate3d(0, calc(100% - 3.5rem), 0);
}

.item__body {
  flex-grow: 1;
  padding: 1rem;
}
.item__body p {
  margin: 0;
}

<div class="grid">
    <div class="item">
        <a href="#0" aria-labelledby="person1"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person1" aria-hidden="true">Person 1</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person2"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person2" aria-hidden="true">Person 2</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person3"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person3" aria-hidden="true">Person 3</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person4"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person4" aria-hidden="true">Person 4</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

question from:https://stackoverflow.com/questions/66054925/sliding-boxes-growing-in-height

Answer 1

Make the height based on the content and the image position:absolute

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");
* {
  box-sizing: border-box;
}

body {
  font-family: Montserrat, sans-serif;
  margin: 0;
  padding: 3rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 17rem);
  grid-auto-rows:1fr; /* remove this if you don't want equal rows*/
  gap: 2rem;
}

.item {
  position: relative;
  background-color: lightGrey;
  overflow-y: hidden;
  box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.1);
}
.item h3 {
  margin: 0;
  display: block;
  background-color: turquoise;
  padding: 1rem;
}
.item a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.item a:hover ~ .item__overlay, .item a:focus ~ .item__overlay {
  transform: translate3d(0, 0, 0);
}

img {
  position:absolute;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.item__overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  transition: transform 300ms;
  background-color: #82ebe0;
  transform: translate3d(0, calc(100% - 3.5rem), 0);
}

.item__body {
  flex-grow: 1;
  padding: 1rem;
}
.item__body p {
  margin: 0;
}

<div class="grid">
    <div class="item">
        <a href="#0" aria-labelledby="person1"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person1" aria-hidden="true">Person 1</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person2"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person2" aria-hidden="true">Person 2</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person3"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person3" aria-hidden="true">Person 3</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
    <div class="item">
        <a href="#0" aria-labelledby="person4"></a>
        <img src='https://images.unsplash.com/photo-1590424744257-fdb03ed78ae0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
        <div class="item__overlay">
            <h3 id="person4" aria-hidden="true">Person 4</h3>
            <div class="item__body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>