Wie würde ich Text unter einem bewegten Bild verbergen

Question

Also habe ich Code, um ein Bild aus der Sicht zu verschieben, wenn der Mauszeiger über seinen Container, aber was ich tun möchte, ist Text während der gesamten Zeit unter dem Bild und dann haben dieser Text enthüllt sich, wenn das Bild zur Seite gleitet. Wie würde ich den Text unter dem Bild positionieren?

Code: https://jsfiddle.net/ff9ovhvp/6/

.row { 
 
    border: 2px solid black; 
 
    width: 500px; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    transition: 3.5s; 
 
} 
 
.imgHold:hover>img { 
 
    transform: translateX(500px); 
 
}

<div class="row"> 
 
    <div class="imgHold"> 
 
    <img src="https://placehold.it/300x100"> 
 
    <h3> 
 
      Some text here 
 
     </h3> 
 
    </div> 
 
</div>

Answer 1

Sie könnten Positionierung, um den Text hinter dem Bild, bezogen auf den Behälter und absolut auf dem h3 zu platzieren:

.row { 
 
    border: 2px solid black; 
 
    width: 500px; 
 
    overflow: hidden; 
 
} 
 
img { 
 
    transition: 3.5s; 
 
} 
 
.imgHold:hover>img { 
 
    transform: translateX(500px); 
 
} 
 
.imgHold { 
 
    position: relative; 
 
} 
 
.imgHold h3 { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.imgHold img { 
 
    z-index: 1; 
 
    position: relative; 
 
    vertical-align: top; 
 
}

<div class="row"> 
 
    <div class="imgHold"> 
 
    <img src="https://placehold.it/300x100"> 
 
    <h3> 
 
     Some text here 
 
    </h3> 
 
    </div> 
 
</div>