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

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>

.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.15);
    transform: scale(1.15);
    -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.03);
    transform: scale(1.03);
}
<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>

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>
Fonte Link
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:

.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.15);
    transform: scale(1.15);
    -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.03);
    transform: scale(1.03);
}
<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>