flexbox text overlay when hovering an image

Question

I'm currently trying to use flexbox for a gallery on my website... I ran into a few problems but this was the only one I couldn't figure out how to fix. Possibly I could get a different an eye or a direction on what's missing/possibly doing wrong. When I'm hovering over an image, my text is currently going out of bound of where it's suppose to appear over the image.

I recreated my problem here in this CodePen: https://codepen.io/vinlune/pen/YzNeeyV

or you can view it below ––
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;
}

appreciate the help!

blake-g · Answer 1 · 2021-04-12T04:56:55.847

You need to add position: relative; to a parent of your hoverText elements.

I'm assuming you want the hoverText to sit inside the gallContent element, so add position: relative; to the gallContent CSS definition

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

So now the hoverText will sit "relative" to the gallContent element parent

score 0 · Answer 2 · answered Apr 12 '21 at 05:27

You need to define position:relative on section.galleryContainer .galleryCol .gallContent class.

Check below snippet will helo you a lot.

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>

score 0 · Answer 3 · answered Apr 12 '21 at 05:34

The position property does the thing here. As you have set position:absolute to your hoverText div element, you have to set a position:relative property on its parent i.e gallContent div.

Try this code:

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>

I have also commented out some properties which I think should not impact what you are trying to achieve.

You can look up to a position tutorial if you want to learn more about it.

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

flexbox text overlay when hovering an image

3 Answers3