时间戳

首页 > 解决方案 > 带有鼠标悬停效果的网格库上的文本

html - 带有鼠标悬停效果的网格库上的文本

问题描述

我想为每个图像制作一个带有鼠标悬停文本效果的网格 3x3 画廊。（仅适用于 HTML 和 CSS）但它不适用于每个图像，它适用于整个网格部分。我不知道为什么。文字应出现在每张图片上。请帮我解决一下这个。谢谢！

HTML

    <section>
  <div class="favorite" id="favorite">

    <div class="favorite-item" id="favorite-item">
      <div class="grid1" id="grid1">
        <img src="fav01.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-1"> Activity </div>
          </div></img>
        <img src="fav02.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-1"> Snowboarding  </div>
          </div></img>
        <img src="fav03.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-1"> Art Museum  </div>
          </div></img>
      </div>
    </div>

    <div class="favorite-item" id="favorite-item">
      <div class="grid2" id="grid2">
        <img src="fav04.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-2"> Halloween party  </div>
          </div>
        <img src="fav05.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-2"> Wine  </div>
          </div>
        <img src="fav06.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-2"> Travel </div>
          </div>
      </div>
    </div>

    <div class="favorite-item" id="favorite-item">
      <div class="grid3" id="grid3">
        <img src="fav07.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-3"> Picnic </div>
          </div>
        <img src="fav08.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-3"> Music  </div>
          </div>
        <img src="fav09.jpeg" alt="favorite img">
          <div class="imgtext">
            <div class="text-1"> Wakeboarding  </div>
          </div>
      </div>
    </div>

  </div>


</section>

CSS

    .favorite {
        width: 70%;
        margin: auto;
        overflow: hidden;
        grid-gap: 3px 3px;
}
.favorite-item {
        width: 100%;
        height: auto;
        position: relative;
}
.favorite-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;

}


.text-1{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s;
}


.text-1:hover {
  opacity: 1;
}



@media (min-width: 640px) {
    .favorite {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 3px;
    }
    .grid1 {
          display:  block;
          row-gap: 3px;
    }
    .grid2 {
          display: block;
          row-gap: 3px;
    }
    .grid3 {
          display: block;
          row-gap: 3px;
    }

在此处输入图像描述

标签： htmlcss

解决方案

你不能把另一个放进tag去<img/>

    .favorite {
        width: 70%;
        margin: auto;
        overflow: hidden;
        grid-gap: 3px 3px;
}
.favorite-item {
        width: 100%;
        height: auto;
        position: relative;
}
.favorite-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;

}

.img-item{
  position:relative;
}


.text-1{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s;
}


.text-1:hover {
  opacity: 1;
}
[class^="grid"]{
 display:flex;
}


@media only screen and (min-width: 640px) {
    .favorite {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 3px;
    }
    .grid1 {
          display:  block;
          row-gap: 3px;
    }
    .grid2 {
          display: block;
          row-gap: 3px;
    }
    .grid3 {
          display: block;
          row-gap: 3px;
    }
<section>
    <div class="favorite" id="favorite">
  
      <div class="favorite-item" id="favorite-item">
        <div class="grid1" id="grid1">
          <div class="img-item">
                  <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Activity </div>
            </div>
          </div>
          <div class="img-item">
                 <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Snowboarding  </div>
            </div>
          </div>
   
        <div class="img-item">
            <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img" />
            <div class="imgtext">
              <div class="text-1"> Art Museum  </div>
            </div>
        </div>
        </div>
      </div>

      <div class="favorite-item" id="favorite-item">
        <div class="grid2" id="grid2">
          <div class="img-item">
                  <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Activity </div>
            </div>
          </div>
          <div class="img-item">
                 <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Snowboarding  </div>
            </div>
          </div>
   
        <div class="img-item">
            <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img" />
            <div class="imgtext">
              <div class="text-1"> Art Museum  </div>
            </div>
        </div>
        </div>
      </div>


      <div class="favorite-item" id="favorite-item">
        <div class="grid3" id="grid3">
          <div class="img-item">
                  <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Activity </div>
            </div>
          </div>
          <div class="img-item">
                 <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img"/>
            <div class="imgtext">
              <div class="text-1"> Snowboarding  </div>
            </div>
          </div>
   
        <div class="img-item">
            <img src="https://thumb.cloud.mail.ru/weblink/thumb/xw1/cdoC/d646Tf3gQ/10/10/1010341404/1010341404_450.jpg" alt="favorite img" />
            <div class="imgtext">
              <div class="text-1"> Art Museum  </div>
            </div>
        </div>
        </div>
      </div>
  
    </div>
  
  
  </section>

推荐阅读