Question

我目前正在尝试将 flexbox 用于我网站上的画廊...我遇到了一些问题，但这是我唯一不知道如何解决的问题。可能我可以对遗漏/可能做错的事情有不同的看法或方向。当我将鼠标悬停在图像上时，我的文本当前超出了它应该出现在图像上的位置。

我在此 CodePen 中重新创建了我的问题： https://codepen.io/vinlune/pen/YzNeeyV

或者你可以在下面查看--
html

<section class="galleryContainer">
  <div class="galleryCol">
  <div class="gallContent">
    <a href="websitepage.html"><img src="https://media2.giphy.com/media/lnCvspqqhwzGMxmf8R/giphy.gif?cid=ecf05e47o1cwbqk74f1e9am33o60ojpf26lmdebbsuz8h5tw&rid=giphy.gif">
      <div class="hoverText">
        title <br /> content #1</div>
      <p>cute corgi eating sushi</p></a>
  </div>
  
<div class="gallContent">
    <a href="websitepage.html"><img src="https://media3.giphy.com/media/SBiRK1eROiAHe0bg3A/giphy.gif">
      <div class="hoverText">
        title <br /> content #1</div>
      <p>cute corgi drinking boba</p></a>
  </div>
  
  <div class="gallContent">
    <a href="websitepage.html"><img src="https://media1.giphy.com/media/Kd5XdzdEhNqhYWe14S/giphy.gif">
      <div class="hoverText">
        title <br /> content #1</div>
      <p>cute corgi eating cake</p></a>
  </div>
  </div>
</section>

css

a { /*  */
  text-decoration:none;
}

section.galleryContainer {
  width: 92%;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

section.galleryContainer .galleryCol {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 auto;
}
section.galleryContainer .galleryCol .gallContent {
  width: 32%;
  height: auto;
  margin: auto; 
  padding: 4px;
  background-color: #efefef;
}
section.galleryContainer .galleryCol .gallContent img{
  width: 100%;
  height: auto;
  postion: relative;
  display: block;
  opacity: 1;
  backface-visibility: hidden;
  transition: 0.5s;
}
section.galleryContainer .galleryCol .gallContent:hover img {
  background-color: #635ca8;
  opacity: 0.2;
}
.galleryCol .gallContent .hoverText {
  display: none;
  text-align: center;
  align-items: center;
  transition: 0.5s;
}

.galleryCol .gallContent:hover .hoverText {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 25%;
  opacity: 1;
  z-index: 3;
}

感谢您的帮助！

Answer 1

您需要将 position: relative; 添加到 hoverText 元素的父元素。

我假设您希望 hoverText 位于 gallContent 元素内，因此将 position: relative; 添加到 gallContent CSS 定义

section.galleryContainer .galleryCol .gallContent {
  width: 32%;
  height: auto;
  margin: auto; 
  padding: 4px;
  background-color: #efefef;
  position: relative;
}

所以现在 hoverText 将“相对”于 gallContent 元素父元素

Answer 2

您需要在 section.galleryContainer .galleryCol .gallContent 类上定义 position:relative。

检查下面的片段会给你很大的帮助。

a { /*  */
  text-decoration:none;
}

section.galleryContainer {
  width: 92%;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

section.galleryContainer .galleryCol {
  margin: 0 auto;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex: 1 auto;
}
section.galleryContainer .galleryCol .gallContent {
  width: 32%;
  height: auto;
  margin: auto; 
  padding: 4px;
  background-color: #efefef;
  position: relative;
}
section.galleryContainer .galleryCol .gallContent img{
  width: 100%;
  height: auto;
  postion: relative;
  display: block;
  opacity: 1;
  backface-visibility: hidden;
  transition: 0.5s;
}
section.galleryContainer .galleryCol .gallContent:hover img {
  background-color: #635ca8;
  opacity: 0.2;
}
.galleryCol .gallContent .hoverText {
  display: flex;
  position: absolute;
  text-align: center;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 80%;
  top: 0;
  left: 0;
  z-index: 3;
  transition: 0.5s;
  transform: scale(0);
  transform-origin: bottom;
}

.galleryCol .gallContent:hover .hoverText {
  transform: scale(1);
  box-shadow: inset 0 0 0 1px red;
}

<section class="galleryContainer">
  <div class="galleryCol">
    <div class="gallContent">
      <a href="websitepage.html"><img src="https://media2.giphy.com/media/lnCvspqqhwzGMxmf8R/giphy.gif?cid=ecf05e47o1cwbqk74f1e9am33o60ojpf26lmdebbsuz8h5tw&rid=giphy.gif">
        <div class="hoverText">
          title <br /> Lorem ispsome dolloar ispsome dolloar dolloar ispsome dolloar and added more content #1
        </div>
        <p>cute corgi eating sushi</p>
      </a>
    </div>
    <div class="gallContent">
      <a href="websitepage.html"><img src="https://media3.giphy.com/media/SBiRK1eROiAHe0bg3A/giphy.gif">
        <div class="hoverText">
          title <br /> content #2
        </div>
        <p>cute corgi drinking boba</p>
      </a>
    </div>
    <div class="gallContent">
      <a href="websitepage.html"><img src="https://media1.giphy.com/media/Kd5XdzdEhNqhYWe14S/giphy.gif">
        <div class="hoverText">
          title <br /> content #3
        </div>
        <p>cute corgi eating cake</p>
      </a>
    </div>
  </div>
</section>

Answer 3

position 属性在这里起作用。由于您已将 position:absolute 设置为 hoverText div 元素，因此您必须在其父元素上设置 position:relative 属性，即 gallContent div。

试试这个代码：

a {
    text-decoration:none;
  }

  section.galleryContainer {
    width: 92%;
    /* height: auto; */
    padding: 0;
    margin: 0 auto;
  }

  section.galleryContainer .galleryCol {
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1 auto;
  }
  section.galleryContainer .galleryCol .gallContent {
    width: 32%;
    /* height: auto; */
    margin: auto;
    padding: 4px;
    background-color: #efefef;
    position: relative;
  }
  section.galleryContainer .galleryCol .gallContent img{
    width: 100%;
    /* height: auto; */
    display: block;
    opacity: 1;
    /* backface-visibility: hidden; */
    transition: 0.5s;
  }
  section.galleryContainer .galleryCol .gallContent:hover img {
    background-color: #635ca8;
    opacity: 0.2;
  }
  .galleryCol .gallContent .hoverText {
    display: none;
    text-align: center;
    align-items: center;
    position: absolute;
    /* flex-direction: row; */
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    opacity: 1;
    z-index: 3;
    transition: 0.5s;
  }

  .galleryCol .gallContent:hover .hoverText {
    display: flex;
  }

<section class="galleryContainer">
    <div class="galleryCol">
      <div class="gallContent">
        <a href="websitepage.html">
          <img src="https://media2.giphy.com/media/lnCvspqqhwzGMxmf8R/giphy.gif?cid=ecf05e47o1cwbqk74f1e9am33o60ojpf26lmdebbsuz8h5tw&rid=giphy.gif">
          <div class="hoverText">
            title <br /> content #1
          </div>
          <p>cute corgi eating sushi</p>
        </a>
      </div>

      <div class="gallContent">
        <a href="websitepage.html">
          <img src="https://media3.giphy.com/media/SBiRK1eROiAHe0bg3A/giphy.gif">
          <div class="hoverText">
            title <br /> content #1
          </div>
          <p>cute corgi drinking boba</p>
        </a>
      </div>

      <div class="gallContent">
        <a href="websitepage.html">
          <img src="https://media1.giphy.com/media/Kd5XdzdEhNqhYWe14S/giphy.gif">
          <div class="hoverText">
            title <br /> content #1
          </div>
          <p>cute corgi eating cake</p>
        </a>
      </div>
    </div>
  </section>

我还注释掉了一些我认为不会影响您要实现的目标的属性。

如果你想了解更多，你可以查看职位教程。

https://www.w3schools.com/css/css_positioning.asp

悬停图像时的 flexbox 文本覆盖

3 个答案: