How to scroll height of image inside a grid when object-ft: cover and object-position: center top

Question

I have created an image gallery using flex. The images are columns where the width of each image is adjusted so that the gallery fits the width of the flex container. When a user hovers over an image in the gallery the image grows and shows its full size.

The images are set to object-fit: cover and object-position: center top, as this prevents the images from scaling to fit the height of the flex container and the top of the image is displayed on hover.

However, I would like the user to be able to scroll the height of the image after it has been expanded if the image has a vertical overflow.

Has anyone encountered this before and do you have any advice for what I should do to achieve this objective?

My HTML and CSS is as follows:

Create the image gallery

 <section class="portfolio_gallery">

            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/bluepinkandwhite.png" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image2.jpg" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image3.jpg" alt="" srcset="">
            </div>
            <div class="portfolio_columns">
                <img class="portfolio_image" src="./Resources/images/image4.jpg" alt="" srcset="">
            </div>

        </section>

.portfolio_gallery is flex with the width of my wrapper

.portfolio_gallery {
  display: flex;
  height: 80vh;
  max-width: 70vw;
  z-index: 2;
}

.portfolio_columns are also flex

.portfolio_columns {
  display: flex;
  flex: 1;
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: all 0.5s ease-in-out;
  z-index: 2;
}

when a user hovers over an image it grows to show the whole image

.portfolio_columns:hover {
  flex-grow: 4;
}

the images (.portfolio_image) inside the gallery are set to object-fit: cover with object-position: center top

.portfolio_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

Answer 1

You need to use overflow-y: auto in your hover class and on the image you need to set the height to auto on hover. Here is the final solution.

.portfolio_columns:hover {
  flex-grow: 4;
  overflow-y: auto;
}

.portfolio_columns:hover .portfolio_image {
  height: auto;

}

Edited to fix the image height transitions and cutting of the image use the following:

.portfolio_columns:hover .portfolio_image {
  min-height: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

Link to my code pen final result: https://codepen.io/shivakumarjakkani/pen/RwVGqbx