如何在图库中的图像上获得不同的悬停覆盖答案

【问题标题】：How to get different hover overlays on images in a gallery如何在图库中的图像上获得不同的悬停覆盖
【发布时间】：2017-12-13 03:24:13
【问题描述】：

我有一个由 5 张图片组成的网格，其中一张比其他张大，而其中 4 张大小相同，并排成一个正方形。我有一个悬停效果适用于较大尺寸的图像，但是当我尝试使其他图像具有与不同文本相同的效果时，它不起作用。我该如何解决这个问题？

/*Navigation Bar*/

.hlogo {
  text-align: center;
  background-color: transparent;
  width: 100%;
  padding-top: 20px;
}

.hlogo a {
  color: #092140;
  text-decoration: none;
  display: inline-block;
  font-size: 50px;
  font-family: 'Oswald', sans-serif;
}

.navbar {
  background-color: transparent;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.navbar a {
  color: #092140;
  text-decoration: none;
  display: inline-block;
  padding: 15px 10px;
  padding-top: 5px;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

.navbar a:hover {
  color: #F24738;
}

/* Grid */

.featured {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 50% 50%;
}

.featured>div {
  text-align: center;
}

.fmain {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  position: relative;
}

.fmain img {
  width: 100%;
}

.main1 {
  grid-column: 3 / span 1;
  grid-row: 1;
}

.main1 img {
  width: 100%;
}

.main2 {
  grid-column: 4 / span 1;
  grid-row: 1;
}

.main2 img {
  width: 100%;
}

.main3 {
  grid-column: 3 / span 1;
  grid-row: 2;
}

.main3 img {
  width: 100%;
}

.main4 {
  grid-column: 4 / span 1;
  grid-row: 2;
}

.main4 img {
  width: 100%;
}

/* Overlay on images in grid */

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .25s ease;
  background-color: #F24738;
}

.hover-text {
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.fmain:hover,
.main1:hover .overlay {
  bottom: 0;
  height: 100%;
  opacity: 1;
}

<div class="hlogo">
  <a href="Home">Hidden Listen</a>
</div>

<!-- Header Links -->
<div class="navbar">
  <a href="Home">Home</a>
  <a href="Reviews">Reviews</a>
  <a href="Artists">Artists</a>
</div>

<!-- Grid of Home page -->
<div class="featured">
  <div class="fmain">
    <img src="/img/Album Covers/marvel1.jpg" alt="Album Cover">
    <div class="overlay">
      <h1 class="hover-text">Text hover shit</h1>
    </div>
  </div>
  <div class="main1">
    <img src="/img/Album Covers/fantasy.jpg" alt="Album Cover">
    <div class="overlay">
      <h1 class="hover-text">Text hover shit</h1>
    </div>
  </div>
  <div class="main2">
    <img src="/img/Album Covers/No Dope on Sundays.jpg" alt="Album Cover">
  </div>
  <div class="main3">
    <img src="/img/Album Covers/Scum Tyler.jpg" alt="Album Cover">
  </div>
  <div class="main4">
    <img src="/img/Album Covers/syre.jpg" alt="Album Cover">
  </div>
</div>

【问题讨论】：

当您将鼠标悬停在 fmain 上时触发悬停，而不是单个图像。这是故意的吗？
当我将鼠标悬停在第一张大图片上时，我希望该图片上方的区域可以将颜色与文字重叠，与其他四张图片相同。我有一个工作，这是较大的 fmain ，但我现在尝试这样做的方式是整个页面都被覆盖了。所以我想弄清楚的是如何让单个图片获得悬停效果。如果这有任何意义。

标签： javascript jquery html css hover

【解决方案1】：

试试这个！

<div class="main1">
    <img src="/img/Album Covers/fantasy.jpg" alt="Album Cover">
    <div class="overlay1">
      <h1 class="hover-text">Text hover shit</h1>
    </div>
  </div>

和css

.main1:hover >.overlay1 {
  bottom: 0;
  height: 100%;
  opacity: 1;
  position:relative;
}

【讨论】：

这不起作用，由于某种原因，它使整个页面出现故障，并且随机悬停开始出现在错误的区域上。
我让它工作了！我只需要为所有这些设置我的位置。非常感谢！

【解决方案2】：

您需要指定 main1234 div 的位置

.main1, .main2,.main3, .main4 {
 position: relative;
}

【讨论】：

【解决方案3】：

你可以试试这个

HTML

<div class="featured">
  <figure class="main fmain">
    <img src="" alt="Album Cover">
    <figcaption class="overlay">
      <h1 class="hover-text">Text hover shit</h1>
    </figcaption>
  </figure>
  <figure class="main main1">
    <img src="" alt="Album Cover">
    <figcaption class="overlay">
      <h1 class="hover-text">Text hover shit</h1>
    </figcaption>
  </figure>
  <figure class="main main2">
    <img src="" alt="Album Cover">
    <figcaption class="overlay">
    </figcaption>
  </figure>
  <figure class="main main3">
    <img src="" alt="Album Cover">
    <figcaption class="overlay">
    </figcaption>
  </figure>
  <figure class="main main4">
    <img src="" alt="Album Cover">
    <figcaption class="overlay">
    </figcaption>
  </figure>
</div>

和 CSS

*{
  margin: 0;
  padding: 0;
}
body{
  margin: 0;
  padding: 0;
}
.featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(8, 1fr);
  grid-gap: 20px;
  margin: 0 30px;

}

.main{
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  padding: 3em; /* Remove Padding when adding image */

}
.main img{
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.fmain {
  grid-column: 1/ 3;
  grid-row: 1/7;
  background: #ccc;
}
.main1 {
  grid-column: 4 / 3;
  grid-row: 1/4;
  background: red;
}

.main2 {
  grid-column: 4 / span 1;
  grid-row: 1/4;
  background: orange;
}

.main3 {
  grid-column: 3 / span 1;
  grid-row: 4/7;
  background: green;
}

.main4 {
  grid-column: 4 / span 1;
  grid-row: 4/7;
  background: red;
}

/* Overlay on images in grid */

.main .overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .25s ease;
  background: #F24738;
}

.hover-text {
  color: white;
  font-size: 20px;
}

.main:hover .overlay,
.main:focus .overlay {
  opacity: 1;
  z-index: 999;
}

【讨论】：