How do you hide text after it's moved off an image?

Question

I have some staff tiles that have their name and title over the image. On mouse hover I would like the image to slightly zoom and the text to slide off the image. I have been able to do all the animations, however I can't get the text to hide when it slides off the image.

I have tried all kinds of variations of overflow: hidden and messed with white-space and text-overflow but no luck.

I have created a CodePen here: https://codepen.io/iisrael/pen/EBjmPW

Here is the HTML

<div class="speaker-tile-grid">         
    <div class="speaker-tile">
        <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px"> 
        <h3>Person #1</h3>
        <h4>They do stuff</h4>
    </div>
</div>

Here is the CSS:

.speaker-tile-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px, 300px));
  grid-template-rows: repeat(auto-fit,minmax(200px, 300px));
  grid-gap: 1em;
  margin: 0;
}

.speaker-tile {
    overflow: hidden!important;
}

.speaker-tile img {
    transition: 750ms;
}

.speaker-tile:hover img {
    transform: scale(1.05);
}

.speaker-tile h3 {
    position: absolute;
    bottom: 45px;
    background-color: #ff6600;
    color: white;
    padding: 5px 10px 10px 10px;
    transition: 750ms;
}

.speaker-tile:hover h3 {
    transform: translateX(-100%);
}

.speaker-tile h4 {
    position: absolute;
    bottom: 25px;
    background-color: #313131;
    color: white;
    padding: 4px 10px;
    transition: 750ms;
}

.speaker-tile:hover h4 {
    transform: translateX(-100%);
}

I need to know how to make the text hide when it's off the image. text-overflow: Clip or overflow: hidden or something else since those didn't work for me. Any help is greatly appreciated.

Musilix · Answer 1 · 2019-06-13T00:00:15.353

What you could do is wrap each of the staffs' details(h3 and h4 elements) in a div titled "details", and create a new css handler for changing the opacity of those detail divs on hover of the speaker tile div as such:

Rather than just shifting the object off and changing the opacity, if you want it to have that cut-off effect, you can keep the "details" divs, but remove the previous css and replace it with that below.

Instead of using a grid container for the speaker-tile-grid div, you can use flexbox, as when you were using the grid display, it was restricting you from hiding the h3 and h4 elements as you were absolutely positioning them.

By using flexbox display, our "details" div is just inherently stacked above the img div, which is all wrapped in a "speaker tile" div as a literal block. So, animating the "details" to the left will now create the cutoff effect as it is withing the "speaker tile" div and is moving outside the bounds of it, rather than being positioned absolutely, unaffected by parent div boundaries.

<div class="speaker-tile-grid">
  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>

  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>

  <div class="speaker-tile">
    <img src="https://cdn.pixabay.com/photo/2016/06/09/20/38/woman-1446557_960_720.jpg" width="300px" height="300px">
    <div id='details'>
      <h3>Person #1</h3>
      <h4>They do stuff</h4>
    </div>
  </div>
</div>

.speaker-tile-grid {
  display:flex;
  flex-direction: row;
  margin: 0;
}


.speaker-tile {
  margin: 0px 15px;
    overflow: hidden!important;
}

.speaker-tile img {
    transition: 750ms;
}

.speaker-tile:hover img {
    transform: scale(1.05);
}

.speaker-tile h3 {
  width: 50%;

  margin: 0;

    background-color: #ff6600;
    color: white;
    padding: 5px 10px 10px 10px;
    transition: 750ms;
}

.speaker-tile:hover h3 {
    transform: translateX(-100%);
}

.speaker-tile h4 {
  width: 65%;

  margin:0;

    background-color: #313131;
    color: white;
    padding: 4px 10px;
    transition: 1150ms;
}

.speaker-tile:hover h4 {
    transform: translateX(-100%);
}

Musilix, that does fade the text to being invisible, however, it doesn't hide the text areas as it leaves the image container, so you can see the text fade when it's animating to the left. Any other ideas? — Iisrael, Jun 12 '19 at 23:31
Is this the effect you're looking for? https://stackoverflow.com/questions/7861648/animate-an-elements-width-from-0-to-100-with-it-and-its-wrapper-being-only-a — Musilix, Jun 12 '19 at 23:46
I dropped the code you provided in a new pen https://codepen.io/iisrael/pen/xoGrOy and it didn't work. Any other ideas? — Iisrael, Jun 13 '19 at 00:22
Yea, in your example the text is below the image, you can still see the edge of the text containers on hover, and the image is resizing, not zooming inside the container — Iisrael, Jun 13 '19 at 00:30

score 0 · Answer 2 · answered Jun 13 '19 at 01:17

I have resolved the issue by wrapping the <h3> and <h4> elements in their own <div>. I then changed the transition to happen to the <div>s not the <h3> and <h4> tags.

Here is the final HTML

<div class="the-grid">
    <div class="the-tile">
        <img src=" # ">
        <div class="the-name">
            <h3>Name Here</h3>
        </div>
        <div class="the-role">
            <h4>Role Here</h4>
        </div>
    </div>
</div>

Here is the final CSS:

.the-grid { 
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(200px, 300px));
  grid-template-rows: repeat(auto-fit,minmax(200px, 300px));
  grid-gap: 20px;
  margin: 0;
}

.the-tile {
    overflow: hidden!important;
}

.the-tile img {
    transition: 750ms;
}

.the-tile:hover img {
    transform: scale(1.05);
}

.the-tile h3 {
    position: absolute;
    bottom: 35px;
    background-color: #ff6600;
    color: white;
    padding: 10px;
}

.the-tile h4 {
    position: absolute;
    bottom: 10px;
    background-color: #313131;
    color: white;
    padding: 5px 10px;
}

.the-tile .the-name, .the-tile .the-role {
    transition: 1s;
}

.the-tile:hover .the-name, .the-tile:hover .the-role {
    transform: translateX(-100%);
}

How do you hide text after it's moved off an image?

2 Answers2