I am have this HTML/CSS gallery using flexbox.
@import "https://unpkg.com/open-props";@import "https://unpkg.com/open-props/normalize.min.css";:root { --magnifier: 6; --gap: 1vmin; --transition: 0.5s;}.gallery { height: 300px; display: flex; align-items: center; justify-content: center; gap: var(--gap);}.child { transition: flex var(--transition), filter var(--transition); height: 100%; flex: 1;}.child:hover { flex: var(--magnifier);}img { --brightness: 0.85; --grayscale: 1; height: 100%; filter: grayscale(var(--grayscale)) brightness(var(--brightness)); object-fit: cover; overflow: hidden;}img:hover { --brightness: 1; --grayscale: 0;}<div class="gallery"><div class="child"><a href="#"><img src="https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div><div class="child"><a href="#"><img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"></a></div></div>https://codepen.io/royfrancis/pen/LYawRax
The portrait images have empty space when hovering. I was hoping object:cover would fill it up but it doesn't quite work. What is the best way to fill up the empty space?
