0

Hola estoy queriendo armar una galería como el ejemplo de pagina que adjunto pagina de guía donde dice TOURNAMENTS que es un carousel y tiene imágenes en diagonales con hovers, arme un pequeño ejemplo pero no logro poder hacer que las imágenes queden rectas. Como podría hacer para generar el hover como en el ejemplo que adjunto?

.grilla{
  height: 524px;
}
.grilla ul li{
    width: 21%;
    display: inline-block;
    height: 304px;
    background-color: #f00;
    border: 1px solid #666;
    margin: 50px auto;
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    transform: skew(-25deg);
    margin: 68px 18px;

}
.grilla ul li a{

}
<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>
              <img src="images/imagen-batman.jpg" style="width: 100%;height: 100%;">
              <div class=""></div>
            </li>
            <li>
              <img src="images/imagen-batman.jpg" style="width: 100%;height: 100%;">
            </li>
            <li>
              <img src="images/imagen-batman.jpg" style="width: 100%;height: 100%;">
            </li>
            <li>
              <img src="images/imagen-batman.jpg" style="width: 100%;height: 100%;">
            </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>

2 respuestas 2

1

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.

11
  • Claro es exactamente lo que quería Luis, y el efecto de hover de los textos y logo que aparecen como el ejemplo eso ya tendría q hacérselo con jquery?
    – MarianoF
    Commented el 15 dic. 2017 a las 19:56
  • no amigo todo lo puedes lograr con css, si la respuesta es correcta y soluciona tu problema dale como aceptada para que los demas programadores solucionen si tienen un problema igual Commented el 15 dic. 2017 a las 19:58
  • Perfecto Luis! probare hacerlo entonces. gracias
    – MarianoF
    Commented el 15 dic. 2017 a las 20:00
  • Ya le agregue el botón espero te ayude saludos Commented el 15 dic. 2017 a las 20:06
  • muchas gracias capo!
    – MarianoF
    Commented el 15 dic. 2017 a las 20:17
1

Lo único que debes hacer es revertir el efecto skew en las imágenes con el valor contrario al que diste a su elemento padre.

.grilla{
  height: 524px;
}

.grilla ul li{
    width: 21%;
    display: inline-block;
    height: 100px;
    background-color: #f00;
    border: 1px solid #666;
    -webkit-transform: skew(-25deg);
    -moz-transform: skew(-25deg);
    -o-transform: skew(-25deg);
    -ms-transform: skew(-25deg);
    transform: skew(-25deg);
    margin: 68px 18px;
    overflow: hidden;

}

.grilla ul li img{
  -webkit-transform: skew(25deg) scale(1.8);
  -moz-transform: skew(25deg) scale(1.8);
  -o-transform: skew(25deg) scale(1.8);
  -ms-transform: skew(25deg) scale(1.8);
  transform: skew(25deg) scale(1.8);
   transition: transform 0.3s;
   width: 100%;
   display: block;
   margin: 0 auto;
}

.grilla ul li img:hover{
  -webkit-transform: skew(25deg) scale(2.2);
  -moz-transform: skew(25deg) scale(2.2);
  -o-transform: skew(25deg) scale(2.2);
  -ms-transform: skew(25deg) scale(2.2);
  transform: skew(25deg) scale(2.2);
  transition: transform 0.3s;
}
<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>
              <img src="https://icueva.files.wordpress.com/2010/02/m78_2400x1600v.jpg">
              <div class=""></div>
            </li>
            <li>
              <img src="https://icueva.files.wordpress.com/2010/02/m78_2400x1600v.jpg">
            </li>
            <li>
              <img src="https://icueva.files.wordpress.com/2010/02/m78_2400x1600v.jpg">
            </li>
            <li>
              <img src="https://icueva.files.wordpress.com/2010/02/m78_2400x1600v.jpg">
            </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>

Te digo como consejo que trates de nunca aplicar estilos inline como tenias el width y height de tus imágenes, siempre trata de usar la hoja de estilos.

5
  • si si solo que use esos estilos en linea para probar. esta bien lo que hiciste, pero como haría para que esten digamos dentro de cada div osea sin que tomen la forma del div del css y que no generen blancos ( que no se vea el color de fondo del div) se comprende?
    – MarianoF
    Commented el 15 dic. 2017 a las 18:32
  • mas que nada es para no tener que armar las imágenes en diagonal si uno quisiese reemplazarlas
    – MarianoF
    Commented el 15 dic. 2017 a las 18:33
  • @MarianoFranco he editado mi respuesta ! Commented el 15 dic. 2017 a las 18:35
  • muchas gracias camilo
    – MarianoF
    Commented el 15 dic. 2017 a las 18:39
  • @MarianoFranco si la respuesta resolvió tus dudas te invito a que consideres marcarla como aceptada, así será de ayuda a otros desarrolladores, saludos! Commented el 15 dic. 2017 a las 18:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.