我會如何去隱藏文本下的動態圖片

Question

所以我有代碼將圖片移動到它的容器上時將其移出視圖，但是我想要在整個時間內在圖片下面顯示文本，然後當圖像滑落到一邊時，文字就顯露出來了。我將如何去定位圖片下的文字？

編號：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

您可以使用定位到圖像後面的文本，相對在容器上和絕對的H3地方：

.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>