Jqueryスライドパネルが隣接する画像を下に移動します

Question

いくつかの画像にはJqueryスライドパネルが使用されています。私が抱えている問題は、スライドパネルが画像を横に動かしていることを示すときです。私はこれが起こることを望んでいない。スライダーパネルを表示する方法はありますが、その横に画像を移動させる方法はありますか？これに類似した質問がありますが、サイトには回答がありません。ここ

は、画像ファイルなしjsfiddleだ： https://jsfiddle.net/amyspod/q2obknwt/

はここに私のコードは次のとおり

<div class="images"> 

      <div class="image1"> 
      <img class="myImg" id="heroimage" src="heros website.jpg" alt="www.heros.com" width="300" height="200"> 
      <div class="panel" id="hero">PSD to responsive website</div> 
      </div> 
      <div class="image2"> 
      <img class="myImg" id="oakimage" src="oak website.jpg" alt="www.oak.com" width="300" height="200"> 
      <div class="panel" id="oak">PSD to responsive website 2</div> 
      </div> 
     </div> 


.myImg { 
    border-radius: 5px; 
    cursor: pointer; 
    display: inline-block; 
    margin-top: 40px; 
    } 

    /*slider panels*/ 
.image1, .image2{ 
    display:inline-block; 
    margin-left: 10%; 

} 
.panel { 
    padding: 10px; 
    text-align: center; 
    background-color: white; 
    font-size: 20px; 
    display: none; 
} 


$(document).ready(function(){ 

function slidepanel(x,y){ 
    $(x).mouseenter(function(){ 
     $(y).slideToggle("slow"); 
    }); 
    $(x).mouseleave(function(){ 
     $(y).slideToggle("slow"); 
    }); 
} 

slidepanel("#oakimage", "#oak"); 
slidepanel("#heroimage", "#hero"); 
}); 

Answer 1

インライン（またはインラインブロック）の要素がベースラインに整列します。このお試しください：そのCSSクラスを注意してください。また

.image1, 
.image2 { 
    ... 
    vertical-align: top; 
} 

Demo

を、設計により、再利用可能であることを意図しています。私はこの場合に2つの理由がないと考えています。また、その使用法や機能を説明する意味的価値が必要です。