Question

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

＆＃13;

/*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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要指定main1234 div的位置

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

Answer 2

试试这个！

<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;
}

Answer 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;
}

如何在图库中的图像上获得不同的悬停叠加层

3 个答案: