Перевод div справа и его исчезновение за невидимой линией

Question

Хорошо, так что я задал вопрос не самым большим, потому что я не слишком уверен в том, как даже объяснить, что я пытаюсь выяснить ,

https://jsfiddle.net/ff9ovhvp/

<div class="row"> 
    <div class="img"> 
    <img src="https://placehold.it/300x100"> 
    </div> 
</div> 

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

Если вы посмотрите на код, который я написал выше, я пытаюсь иметь что заполнителем изображение исчезает, как она проходит через правую границу. Не нужно, чтобы он поэтапно исчезал или исчезал сразу, но похоже, что его толкают за стену или барьер, вроде как маленький карман, а затем выталкивают его оттуда, когда курсор больше не витает в изображении.

Answer 1

Я хотел бы использовать анимацию, а не просто переход.

Я также основал бы анимацию при наведении родительского div изображения, а не на изображение. Если вы создаете события наведения на изображении, и изображение перемещается ... это означает, что позиция курсора может (и будет) изменять переход/анимацию, потому что изображение перемещается под курсором ... так что это на 100% возможно для изображения для перемещения так «зависание» уже не так.

.row{ 
 
    border: 1px solid #aaa; 
 
    width:500px; 
 
    background: #eee; 
 
    margin: 10px; 
 
    box-shadow: inset 0 0 15px #ccc, inset 0 0 35px #ddd; 
 
    border-radius: 10px; 
 
    
 
    /* hide overflow of container div */ 
 
    overflow: hidden; 
 
} 
 

 
/* set image holder to 100%% width of parent */ 
 
.imgHold { width: 100%; position: relative; left:0; } 
 
img { display: block;} 
 

 
/* animate the IMAGE on hover of the parent div 
 
    this prevents the hover state causing the 
 
\t animation to be "jerky" because the image 
 
\t moves under the cursor. */ 
 
.imgHold:hover img{ 
 
\t position: relative; 
 
    animation: toRight 2s 1 forwards; 
 
} 
 

 
@keyframes toRight { 
 
\t from { left: 0%;} 
 
\t to { left: 110%;} 
 
}

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

_{огорчает: У не классов имя и идентификатор такие же, как стандартные HTML-теги. Это плохая практика, и только вызывает путаницу, если в будущем потребуется редактирование.}

.row{ 
 
    border: 1px solid #aaa; 
 
    width:500px; 
 
    background: #eee; 
 
    margin: 10px; 
 
    box-shadow: inset 0 0 15px #ccc, inset 0 0 35px #ddd; 
 
    border-radius: 10px; 
 
    
 
    /* hide overflow of container div */ 
 
    overflow: hidden; 
 
} 
 

 
/* set image holder to 100%% width of parent */ 
 
.imgHold { width: 100%; position: relative; left:0; } 
 
img { display: block; position: relative; left: 0%;} 
 

 
.imgHold:hover img{ 
 
\t position: relative; 
 
    left: 105%; 
 
    transition: left 2s; 
 
}

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

Answer 2

Просто добавьте overflow:hidden в ваш .row, и он отлично работает.

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

<div class="row"> 
 
    <div class="img"> 
 
    <img src="https://placehold.it/300x100"> 
 
    </div> 
 
</div>

Answer 3

Вам просто нужно добавить overflow: hidden; CSS свойство к .row элемента, чтобы сделать его идти за .row дел.

Вот обновленный jsFiddle или посмотреть на код ниже

.row { 
 
    border: 2px solid black; 
 
    width: 500px; 
 
    height: 100px; 
 
    overflow: hidden; /* Just add this property */ 
 
} 
 

 
img { 
 
    transition: 3.5s; 
 
} 
 

 
img:hover { 
 
    transform:translateX(500px); 
 
}

<div class="row"> 
 
    <div class="img"> 
 
    <img src="https://placehold.it/300x100"> 
 
    </div> 
 
</div>