how to generate divs with css Skew and images inside

Question

how to generate divs with css Skew and images inside

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

Hi, I'm wanting to put together a gallery like the example page that I attached guide page where TOURNAMENTS says it's a carousel and it has images in diagonal with hovers, put together a small example but I can not make the images go straight. How could I generate the hover as in the example I attached?

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

javascript jquery html css bootstrap

asked by MarianoF 15.12.2017 в 19:19

source

2 answers

1

All you have to do is to reverse the skew effect on the images with the opposite value to the one you gave your parent element.

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

I tell you as a suggestion that you try to never apply inline styles as you had the width and height of your images, always try to use the style sheet.

answered by 15.12.2017 в 19:26

Calling an Array in C ++ Collect an integer from a file

score 1 · Accepted Answer

Good friend I hope this is what you are looking for.

The idea is to add the attribute transform: skewX(-30deg); to the li to be seen inclined and to the div within the put it on the contrary transform: skewX(30deg) thus returns the image to normal.

NOTE: to cut the image you have to put the <li> overflow:hidden and thus we complete the tilting effect without distorting the image.

I hope you help greetings.

Functional example

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

Definition

The CSS function defines a transformation that skews an element in the 2D plane. Your result is a type of data.skew ()

This transformation is a cut mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions. The coordinates of each point are modified by a value proportional to the specified angle and the distance to the origin; therefore, the farther a point is from the origin, the greater the added value.