Панель слайдов 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

Инлайн (или встроенный блок) выравнивания элементов базовой линии. Попробуйте это:

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

Demo

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