Gallery with skew that occupies page width

Question

Gallery with skew that occupies page width

Navigation

#1 by (1 votes)

1

So, I'm trying to make a section on my site that has 10 degrees of skew, the intention was for this section to occupy 100% of the width of the page, but when I do skew the edges come from the skew, how can I to make this gallery fill the whole page width?

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

I would like this selected white area to disappear ....

Thank you guys!

html css imagem galeria

asked by anonymous 03.05.2018 / 20:49

1 answer

Change HTML code via jQuery Inheritance in flask models

score 1 · Accepted Answer

___ erkimt ___ Gallery with skew that occupies page width ______ qstntxt ___

So, I'm trying to make a section on my site that has 10 degrees of skew, the intention was for this section to occupy 100% of the width of the page, but when I do skew the edges come from the skew, how can I to make this gallery fill the whole page width?

HTML:

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

CSS:

 <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>

I would like this selected white area to disappear ....

Thankyouguys!

_________azszpr296008

Cara had to adjust some things in class I changed it from display:inline to display:inline-block , and set the width to 110% to play the white skwed to off-screen and adjusted the margin putting a value negative to the left of -5% and stood straight line in the center with 5% off to each side.

See the example to understand better:

EDIT: For the image not do skew u have to do it the opposite effect to the Father, so if u put skew -10 po father have to put skew 10 in son (for the image). See in the code that u will understand let commented 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>