Image Grid Hover

Question

I'm trying to make an image grid which will show text when hovered. While doing this, I ran into a problem. My layout is becoming like this:

The text is not centering on the image, and the grid layout is becoming like this for some reason. Help is appreciated!

.members-grid {
  display: grid;
  grid-gap: 5px;
  justify-items: center;
  padding-bottom: 5em;
}

.members-grid .size {
  width: 100%;
}


/* For tablets: */

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto;
  }
  .size {
    width: 45%;
  }
}


/* For desktop: */

@media (min-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto auto;
  }
  .size {
    width: 30%;
  }
}

.name {
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

<div class="members-grid">
  <div class="pic">
    <img src="eunbi.jpg" alt="kwon eunbi" class="size">
    <div class="name">
      <h2>Kwon Eunbi</h2>
    </div>
  </div>

  <div class="pic">
    <img src="sakura.jpg" alt="miywaki sakura" class="size">
    <div class="name">
      <h2>Miyawaki Sakura</h2>
    </div>
  </div>

  <div class="pic">
    <img src="hyewon.jpg" alt="kang hyewon" class="size">
    <div class="name">
      <h2>Kang Hyewon</h2>
    </div>
  </div>
</div>

Answer 1

If you want the text to be aligned with the grid, you need to make it a direct child of the parent grid. CSS unchanged

.members-grid {
  display: grid;
  grid-gap: 5px;
  justify-items: center;
  padding-bottom: 5em;
}
img {
  height: 100%;
}

.members-grid .size {
  width: 100%;
}


/* For tablets: */

@media only screen and (min-width: 600px) and (max-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto;
  }
  
  .size {
    width: 45%;
  }
}


/* For desktop: */

@media (min-width: 768px) {
  .members-grid {
    grid-template-columns: auto auto auto;
  }
  
  .size {
    width: 30%;
  }
}

.name{
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

<div class = "members-grid">
    <div class = "pic">
        <img src = "//unsplash.it/50" alt = "kwon eunbi" class = "size">
            </div>
            
            <div class = "pic">                     
                <img src = "//unsplash.it/50" alt = "miywaki sakura" class = "size">
            </div>
            
            <div class = "pic">                         
                <img src = "//unsplash.it/50" alt = "kang hyewon" class = "size">
            </div>
                        <div class = "name">
                                <h2>Kwon Eunbi</h2>
                        </div>
            <div class = "name">
                <h2>Miyawaki Sakura</h2>
                </div>
    <div class = "name">
        <h2>Kang Hyewon</h2>
    </div>
</div>

It works on bigger screens like you want. For smaller screen, you'll have to play around with the media queries.

Answer 2

I guess this piece of code will help you. It is responsive too.

Here grid-wrapper and polaroid classes make this grid responsive. If you have more other number of images in grid, change width of polaroid and grid-template-columns of grid-wrapper.

Container div has image and text in it. When we hover over image, opacity of image falls where as opacity of text increases. That is managed in hover effect in css. Class 'middle' keeps text in the center of image.

.abtimg {
  padding: 5px
}

.width {
  width: 100%
}

.container {
  position: relative;
  width: auto;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: 0.5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.5;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #fff;
  color: #000;
  font-size: 16px;
  padding: 16px 32px;
}

.ptr {
  cursor: pointer;
}

a:hover {
  color: #000;
  text-decoration: none;
}

.font1 {
  font-size: 2em;
  text-align: center;
  text-decoration: underline;
}

@media only screen and (min-width: 610px) {
  .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(25vw, 1fr));
    justify-items: center;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 3em;
  }
  .polaroid {
    width: 25vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background-color: #fff;
    height: auto;
  }
}

@media only screen and (max-width: 609px) {
  .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(80vw, 1fr));
    justify-items: center;
    align-items: center;
    padding-top: 4em;
    padding-bottom: 3em;
  }
  .polaroid {
    width: 80vw;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    background-color: #fff;
    height: auto;
  }
}

<div class="grid-wrapper">
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/1.jpg" alt="kwon eunbi">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">kwon eunbi</div>
                    </a></div>
                </div>
            </div>
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/2.jpg" alt="miywaki sakura">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">miywaki sakura</div>
                    </a></div>
                </div>
            </div>
            <div class="polaroid">
                <div class="container">
                    <img class="abtimg width image" src="images/3.jpg" alt="kang hyewon">
                    <div class="middle">
                        <a href="#" class="font1"><div class="text ptr">kang hyewon</div>
                    </a></div>
                </div>
            </div>
    </div>