Jquery 슬라이드 패널이 인접한 그림을 아래로 이동합니다.

Question

일부 이미지에는 Jquery 슬라이드 패널을 사용하고 있습니다. 내가 겪고있는 문제는 슬라이드 패널이 이미지를 옆으로 움직이는 것으로 표시 할 때입니다. 나는 이것을 원하지 않는다. 슬라이더 패널을 표시하지만 옆에 이미지를 이동하지 않는 방법이 있습니까? 이와 비슷한 질문이 있지만 사이트에 답변이 없습니다.

다음은 이미지 파일없이 jsfiddle입니다 :

<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

인라인 (또는 인라인 블록) 요소가 기준선에 정렬 : 는 https://jsfiddle.net/amyspod/q2obknwt/

여기 내 코드입니다. 이 시도 :

Demo

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

는 또한 디자인에 의한 CSS 클래스를,주의, 재사용되는 것이다. 나는이 경우에 두 가지를 가질 이유가 없으며, 그것들의 사용이나 기능을 설명하는 의미 론적 가치가 있어야한다.