JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="container">
        <img class="pic" src="http://www.simonebeautytherapy.co.za/wp-content/uploads/2013/09/placeholder2.jpg" />
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/latest/scale-to-width-down/480?cb=20121104001421" />
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/latest/scale-to-width-down/480?cb=20121104001421" />
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/latest/scale-to-width-down/480?cb=20121104001421" />
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/latest/scale-to-width-down/480?cb=20121104001421" />
        <img src="https://vignette.wikia.nocookie.net/logopedia/images/e/ee/Burger_King_Logo.svg.png/revision/latest/scale-to-width-down/480?cb=20121104001421" />
        <img src="http://www.simonebeautytherapy.co.za/wp-content/uploads/2013/09/placeholder2.jpg" />
        <img src="http://www.simonebeautytherapy.co.za/wp-content/uploads/2013/09/placeholder2.jpg" />
    </div>
</body>

CSS

body {
    margin:0px;
    padding:0px;
}
.container {
    background-color:#c1c1c1;
    height:400px;
    text-align:center;
}
div img {
    height:100px;
    position:absolute;
    width:150px;
    top:50%;
    left: 0;
    margin-top:-50px;
    transform:skew(30deg);
    transform:rotate(30deg);
    opacity:0.7;
    transition:all 1s ease;
}
img:hover {
    height:400px;
    width:600px;
    transform:skew(0deg);
    transform:rotate(0deg);
    opacity:1;
    overflow:hidden;
}

JavaScript

total = $('.pic').siblings();
len = total.length;
value = 0;
offset = 80;
for (var i = 0; i <= len; i++) {
    $(total[i]).css('margin-left', value + offset + 'px');
    value += offset;
}