EDIT: Para a imagem não fazer o skew
vc tem que fazer nela o efeito oposto ao do PAI, então se vc colocou skew -10
po pai tem que colocar skew 10
no filho (no caso na imagem). Veja no código que vc vai entender deixei comentado no CSS
.section-artists {
padding: 0;
}
.artists-showcase {
list-style: none;
display: inline-block;
width: 110%;
height: 100%;
padding: 0;
margin-left: -5%;
}
.artists-showcase li {
display: block;
transform: skewX(-10deg);
float: left;
width: 25%;
height: 100%;
}
.artist-photo {
width: 100%;
height: 100%;
margin:0;
overflow: hidden;
background-color: #000;
}
.artist-photo img {
opacity: 0.7;
width: 100%;
height: auto;
-webkit-transform: scale(1.1518) skewX(10deg); /* reverte o skew para a imagem ficar reta */
transform: scale(1.1518) skewX(10deg);
-webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, -webkit-transform 0.5s;
transition: transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s;
}
.artist-photo img:hover {
opacity: 1;
-webkit-transform: scale(1.03085) skewX(10deg);
transform: scale(1.03085) skewX(10deg);
}
<section class="section-artists">
<div class="row">
<h1>SEE YOUR TOP ARTISTS</h1>
</div>
<ul class="artists-showcase Clearfix">
<li>
<figure class="artist-photo">
<img src="http://placecage.com/641/310" alt="Korean bibimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="http://placecage.com/642/310" alt="Simple italian pizza with cherry and tomatoes">
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="http://placecage.com/643/310" alt="Chicken breast steak with vegetables">
</figure>
</li>
<li>
<figure class="artist-photo">
<img src="http://placecage.com/644/310" alt="Autumn pumpkin soup">
</figure>
</li>
</ul>
</section>