1

É assim, eu estou a tentar fazer no meu site uma seccao que tem 10 graus de skew, o intuito era que essa seccao ocupasse 100% da largura da pagina, mas quando faço skew ficam as margens provenientes do skew, como posso fazer com que esta galeria ocupe a largura da pagina toda?

HTML:

<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="/img/dummy-640x310-1.jpg" alt="Korean bibimbap with egg and vegetables">
                    </figure>   
                </li>

                <li>
                    <figure class="artist-photo">
                        <img src="/img/dummy-640x310-4.jpg" alt="Simple italian pizza with cherry and tomatoes">
                    </figure>   
                </li>

                <li>
                    <figure class="artist-photo">
                        <img src="/img/dummy-640x310-2.jpg" alt="Chicken breast steak with vegetables">
                    </figure>   
                </li>

                <li>
                    <figure class="artist-photo">
                        <img src="resourses/img/4.jpg" alt="Autumn pumpkin soup">
                    </figure>   
                </li>

            </ul>
      </section>

CSS:

/* ------------------------ SECTION ARTISTS -------------------- */


.section-artists {
    padding: 0;
} 

.artists-showcase {
    list-style: none;
    display: inline;
    width: 200%;
    height: 100%;

}


.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);
}

Gostaria que essa area branca selecionada desaparecesse....

inserir a descrição da imagem aqui

Obrigado pessoal!

2
  • Cara está meio complicado de entende exatamente até ande vc gostaria que o skwed fosse... Teria como vc colocar uma imagem na pergunta de como vc queria que ficasse?
    – hugocsl
    Commented 3/05/2018 às 19:06
  • Imagem adicionada! Obrigado! Commented 3/05/2018 às 19:15

1 Resposta 1

1

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>

3
  • Sim é isso mesmo amigo! Obrigado Mas como faço para as imagens não ficarem distorcidas? Nesse caso so quero o container com skew, nao as imagens. Obrigado! Commented 3/05/2018 às 20:22
  • @NelsonPacheco ajustei o código, leia a parde do EDIT para entender como corrigi o skew na imagem.
    – hugocsl
    Commented 3/05/2018 às 20:56
  • Muito obrigado amigo! Commented 3/05/2018 às 21:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .