skip to Main Content

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&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a></div>
  <div class="child"><a href="#">
    <img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;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?

enter image description here

2

Answers


  1. <a> and <img> also need to be width:100% and height:100%;

    @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);
    }
    
    .child a {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    img {
      --brightness: 0.85;
      --grayscale: 1;
      width: 100%;
      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&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/7604425/pexels-photo-7604425.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/4666748/pexels-photo-4666748.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/4932184/pexels-photo-4932184.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/4210900/pexels-photo-4210900.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/3126574/pexels-photo-3126574.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/167699/pexels-photo-167699.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/1376201/pexels-photo-1376201.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/7919/pexels-photo.jpg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/2437291/pexels-photo-2437291.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/1679772/pexels-photo-1679772.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/1183099/pexels-photo-1183099.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/1813513/pexels-photo-1813513.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
      <div class="child">
        <a href="#">
          <img src="https://images.pexels.com/photos/931018/pexels-photo-931018.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=650&amp;w=940"></a>
      </div>
    </div>
    Login or Signup to reply.
  2. In order for object-fit to work, you need to style your image elements with a definite width and height. Yours have a definite height, but you have not specified a width. In the absence of definite dimensions, all the browser has to work with are the intrinsic dimensions of the source image.

    As per @Shuo’s answer, in your design your .child divs have their widths determined by the flexbox .gallery, so their widths are definite. But neither the anchor element nor the image element inside them have been assigned a width. Set the width of both to 100% and your problem will be solved.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search