JSFiddle - React, Tailwind, and code Playground

HTML

<div class="schraeg">
    <div>
        <img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />
    </div>
    <div>
        <img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />
    </div>
    <div>
        <img src="http://img3.wikia.nocookie.net/__cb20110428173444/denaruto3/de/images/thumb/1/19/SasukesVogel01.png/100px-36,717,0,680-SasukesVogel01.png" width="100" height="100" />
    </div>
</div>

CSS

.schraeg div, .schraeg div img { 
    position: relative; 
    float: left;
    transition: transform 1s;
}

.schraeg div:before, .schraeg div:after {
    content: "";
    position: absolute;
    z-index:2;
    top: 0;
    width: 10%;
    height: 100%;
    opacity: 1;
    background-color:white;
    transform: skew(-5deg);
    transition: transform 1s, opacity 1s;
}
.schraeg div:before {
    left: 5%;
}
.schraeg div:first-child:before {
    left: -5%;
    width: 20%;
}
.schraeg div:after {
    right: -5%;
}
.schraeg div:hover:before, .schraeg div:hover:after {
    transform: skew(-5deg) scale(1.1,1.1);
    opacity: 0;
}

.schraeg div:hover img {
    z-index: 3;
    transform: scale(1.1,1.1);
}