Edit in JSFiddle

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
}
section {
    transition: all 0.3s ease;
    height: 250px;
    margin: 0;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    /* make 1 flex unit wide */
    flex: 1;
    overflow: hidden;
}
section img {
     height: 300px;
}
section:hover {
    /* take up two flex units when hovering */
    flex: 2;
}
<div class="container">
    <section>
        <img src="http://lorempixel.com/300/300/" width="200" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/400/300/" width="400" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/500/300/" width="500" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/350/300/" width="350" height="300" />
    </section>
    <section>
        <img src="http://lorempixel.com/450/300/" width="450" height="300" />
    </section>
</div>