Buenas amigo espero esto sea lo que buscas.
La idea es agregarle el atributo transform: skewX(-30deg);
a los li
para que se vean inclinados y a el div
dentro de el ponerlo al contrario transform: skewX(30deg)
así vuelve la imagen a la normalidad.
NOTA: para cortar la imagen hay que ponerle a los <li>
overflow:hidden
y así completamos el efecto de inclinación sin deformar la imagen.
espero te ayude saludos.
Ejemplo funcional
.grilla{
height: 524px;
}
.grilla ul {
opacity: 1;
width: 1100px;
}
.grilla ul li{
margin: 0 1.5rem;
width: 20rem;
display: inline-block;
height: 27.75rem;
transform: skewX(-30deg);
overflow: hidden;
backface-visibility: hidden;
}
.grilla ul li>div:hover {
transform: translate3d(0, -4.125rem, 0) skewX(30deg);
}
.grilla ul li>div {
transition:all .3s ease;
width: 180%;
height: 100%;
position: absolute;
left: -40%;
top: 0;
transform: skewX(30deg)
}
.grilla ul li img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: center/cover no-repeat;
display:block;
border:0;
}
.grilla ul li:hover .btn {
opacity: 1;
transform: translate(0);/*Nuevo codigo para link en botones*/
z-index:100;/*Nuevo codigo para link en botones*/
}
.btn {
transition:all .3s ease;
width: 13.3125rem;
position: absolute;
bottom: 4.5rem;
left:6.2rem;
box-shadow: -1.5625rem -0.6875rem 5.4375rem 0 rgba(0,0,0,0.49);
opacity: 0;
z-index:100;
background: rgb(255, 255, 255);
padding: 0 !important;
font-size: 1rem;
color: #5113b3;
transform: translate(0,20px);/*Nuevo codigo para link en botones*/
}
/*Nuevo codigo para link en botones*/
.btn:hover {
background: #5113b3;
}
.btn a {
display:block;
padding: 6px 12px;
text-decoration: none !important;
}
.btn:hover a{
color: rgb(255, 255, 255) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="grilla">
<div class="container">
<div class="row">
<ul>
<li>
<div>
<img style="background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf219afc5b3395c3494d9/files/slant-call-of-duty.png?1500314315')" src="">
<div class="btn"><a href="https://www.google.co.ve/">Results</a></div>
</div>
</li>
<li>
<div>
<img style="background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494dc/files/slant-league-legends.png?1500312090')" src="">
<div class="btn"><a href="https://www.google.co.ve/">Results</a></div>
</div>
</li>
<li>
<div>
<img style="background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091')" src="">
<div class="btn"><a href="https://www.google.co.ve/">Results</a></div>
</div>
</li>
<li>
<div>
<img style="background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21cafc5b3395c3494e5/files/slant-gear-of-war.png?1500312092')" src="">
<div class="btn"><a href="https://www.google.co.ve/">Results</a></div>
</div>
</li>
</ul>
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Definición
La función CSS define una transformación que sesga un elemento en el plano 2D. Su resultado es un tipo de datos.skew()
Esta transformación es un mapeo de corte ( transvección ) que distorsiona cada punto dentro de un elemento por un cierto ángulo en las direcciones horizontal y vertical. Las coordenadas de cada punto se modifican por un valor proporcional al ángulo especificado y la distancia al origen; por lo tanto, cuanto más lejos del origen se encuentre un punto, mayor será el valor agregado.