Skip to main content
2 de 2
adicionei mais informações
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

Cara foi preciso ajustar algumas coisas na classe da eu mudei ela de display:inline para display:inline-block, e coloquei a largura de 110% pra jogar o branco do skwed pra fora da tela e ajustei a margem colocando um valor negativo a esquerda de -5% e ficou direitinho alinhada no centro com 5% pra fora de cada lado.

Veja o exemplo para entender melhor:

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.18) skewX(10deg); /* reverte o skew para a imagem ficar reta */
        transform: scale(1.18) 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.085) skewX(10deg);
        transform: scale(1.085) 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>

hugocsl
  • 66,9mil
  • 17
  • 88
  • 166