Как я могу увеличить div, завиваясь над ним?

Question

У меня есть горизонтальный ряд, который содержит изображения & Я пытаюсь достигнуть того же самого масштабного эффекта, который использует Netflix, когда изображение в настоящее время зависло над, как показано в этом видео:

https://s3.amazonaws.com/whatever12345/net.mov

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

Вот CSS & JQuery я пытался использовать, но это не то, что я пытаюсь достичь:

.cover-item { 
    position: relative; 
    display: inline-block; 
    width: 136px; 
    height: 178px; 
    vertical-align: bottom; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
    cursor: pointer; 

    -webkit-transition: 400ms; 
    transition: 400ms; 
} 

.cover-item-open { 
    transform: scale(1.1); 
    z-index: 2; 
} 

$('.image-container a').hover(function() { 
    $(this).find('.cover-item').toggleClass('cover-item-open'); 
}); 

Я создал этот JSFiddle, чтобы показать мой полный код

Answer 1

вам должны быть в состоянии сделать это, используя: hover

.my_div:hover { 
    transform: scale(...); 
} 

EDIT: при дальнейшем рассмотрении это должно работать лучше

$(document).ready(function() { 
    $(document).on("mouseenter", ".scalable", function() { 
     $(this).animate({ width: "100px" }); 
    }); 
    $(document).on("mouseout", ".scalable", function() { 
     $(this).animate({ width: "50px" }); 
    }); 
}); 

и HTML:

<img class="scalable" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/600px-Earth_Western_Hemisphere_transparent_background.png" alt="earth"> 
<img class="scalable" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Earth_Western_Hemisphere_transparent_background.png/600px-Earth_Western_Hemisphere_transparent_background.png" alt="earth"> 

То же основная идея должна работать для дивы, только изображения легче увидеть.