divのホバー上を上下にスライドする画像のCSSトランジションを追加するには

Question

私はブートストラップの行に2つのブロックを持っています。 1つは画像を有し、もう1つはテキストを有する。私はそれらを両方の列に巻いた。私が画像をスクロールするたびに、スライドが少し下に移動する必要があり、divを横切るたびに、divの画像から再びマウスを移動させる必要があります。私はホバリングdivのクラスを追加したり削除したりしてみました。しかし、私はそれが移行と私が適用する必要があるときに混乱を得ていませんでした。私は

<div class="container-fluid"><!-- /.container --> 
<div class="row shopping"><!-- main here --> 
      <div class="col-md-12"> 
      <div class="row shop4"> 
       <div class="col-md-6"> 
       <img src="images/leftzoom.jpg" width="50%"> 
       </div> 
       <div class="col-md-6"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> 
       </div> 
      </div> 
</div> 
     </div><!-- main here --> 
     </div><!-- /.container --> 

Answer 1

はちょうどあなたの<img>や親、それを含む<div>に変換を追加助けてください。

img { transition: transform .3s } 
 

 
img:hover { 
 
    transform: translateY(1rem); 
 
}

<div> 
 
    <img src="https://fillmurray.com/300/200" /> 
 
</div>

Answer 2

また、画像位置が相対するとtop性（最大移動させるための負の値と下降用正の値）に遷移を追加することができる：

img { 
 
position:relative; 
 
top:0; 
 
transition:0.5s; 
 
} 
 
img:hover { 
 
top:10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container-fluid"> 
 
    <!-- /.container --> 
 
    <div class="row shopping"> 
 
    <!-- main here --> 
 
    <div class="col-md-12"> 
 
     <div class="row shop4"> 
 
     <div class="col-md-6"> 
 
      <img src="https://lorempixel.com/200/200/" width="50%"> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- main here --> 
 
</div>

Answer 3

これは役に立ちます

img { 
 
position: absolute; 
 
transition: transform .3s 
 

 
} 
 
img:hover { 
 
     transform: translateY(2rem); 
 
} 
 
.text 
 
{ 
 
    
 
    position: absolute; 
 
    width:100%; 
 
    text-align:center; 
 
    
 
}

<div> 
 
    <div class="text">Hi I am here</div> 
 
    <img src="http://sifatit.com/wp-content/uploads/2012/07/dummy.jpg" /> 
 
</div>