图像网格悬停[重复]

Question

我正在尝试制作一个在悬停时显示文本的图像网格。在执行此操作时，我遇到了一个问题。我的布局变成了这样：

文字没有以图片为中心，网格布局不知为何变成了这样。感谢您的帮助！

.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

如果您希望文本与网格对齐，则需要使其成为父 grid 的直接子代。 CSS 不变

.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>

它适用于您想要的更大屏幕。对于较小的屏幕，您将不得不使用媒体查询。

Answer 2

我想这段代码会对你有所帮助。它也很灵敏。

这里的网格包装器和宝丽来类使这个网格具有响应性。如果网格中有更多其他数量的图像，请更改网格包装器的宝丽来和网格模板列的宽度。

容器 div 中包含图像和文本。当我们将鼠标悬停在图像上时，图像的不透明度会随着文本的不透明度增加而下降。这是在 css 中以悬停效果管理的。 'middle' 类将文本保持在图像的中心。

.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>