Problems with hover image transform: skewX CSS

Question

Problems with hover image transform: skewX CSS

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I am wanting to add a title for each image when I do the hover and I would like to place it as the example of the attached image, the problem that I was testing and it does not allow me to position it over the image and that is in the top limit, Why can not I take the position and the z index? The attached js is because the images are a carousel, but do not give that ball.

.carouselTicker{
    overflow-y: hidden;
    height: 280px;   
} 


.carouselTicker__list{
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

.carouselTicker__item{
    margin: 0 0 0 5px;
    float: left;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.carouselTicker__loader{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff url("../images/loader.gif") center center no-repeat;
}

/**
 * CSS style for vertical direction
 **/

.carouselTicker_vertical .carouselTicker__list{
    margin: 0;
}

.carouselTicker_vertical .carouselTicker__item{
    margin: 0 0 5px 0;
    border: 4px solid red;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}


#carouselTicker .carouselTicker__item {
    width: auto;
    height: auto;
    line-height: normal;
}

.carouselTicker__item img {
    vertical-align: top;
}
#grilla-programacion .titulo-de-grilla h2{
  padding-top: 110px;
  font-size: 40px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0;
  margin-bottom: 20px;
}
#grilla-programacion .titulo-de-grilla .texto-degradado {
    background: linear-gradient(#febf0d, #039d7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#grilla-programacion .grilla ul {
  opacity: 1;
  
}
#grilla-programacion .grilla ul li{
  margin: 0 1.5rem;
  width: 25.9%;
  display: inline-block;
  height: 27.75rem;
  transform: skewX(-30deg);
  overflow: hidden;
  backface-visibility: hidden;

}
#grilla-programacion .grilla ul li>div:hover {
    transform: translate3d(0, -4.125rem, 0) skewX(30deg);
}

#grilla-programacion .grilla ul li>div {
    transition: all .3s ease;
    width: 185%;
    height: 280px;
    position: absolute;
    left: -40%;
    top: -1px;
    transform: skewX(30deg);
}
#grilla-programacion .grilla ul li img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    display:block;
    border:0;
    z-index: 2
}
#grilla-programacion .grilla ul li .img-1{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-2{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-3{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-4{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-5{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-6{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-7{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}

#grilla-programacion .grilla ul li:hover .btn {
    opacity: 1;
}

#grilla-programacion .grilla .btn {
  transition: all .3s ease;
  position: absolute;
  bottom: 4.2rem;
  left: 8.2rem;
  box-shadow: -1.5625rem -0.6875rem 5.4375rem 0 rgba(0,0,0,0.49);
  opacity: 0;
  z-index: 100;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
#grilla-programacion .grilla .titulo{
  position: absolute;
  top: 0;
  z-index: 100!important
}
#grilla-programacion .grilla .titulo h2{
  position: relative;
  top: 0;
  color: #fff;
  z-index: 100!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">

<div id="grilla-programacion">
    <section class="grilla">
      <div class="container-fluid">
        <div class="row carouselTicker carouselTicker-start">
          <ul class="carouselTicker__list">
            <li class="carouselTicker__item">           
            <div>
              <img class="img-1" src="">
              <div class="btn">Ficha del programa</div>
            </div>
            <div class="titulo">
              <h2>El Pacto copernico</h2>
            </div>
            </li>
            <li class="carouselTicker__item">
            <div>
              <img class="img-2" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>
            <li class="carouselTicker__item">
            <div>
              <img class="img-3" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>
            <li class="carouselTicker__item">          
            <div>
             <img class="img-4" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>  
            <li class="carouselTicker__item">          
            <div>
              <img class="img-5" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>   
            <li class="carouselTicker__item">          
            <div>
              <img class="img-6" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li> 
            <li class="carouselTicker__item">          
            <div>
              <img class="img-7" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>    
            <li class="carouselTicker__item">          
            <div>
              <img class="img-7" src="">
              <div class="btn">Ficha del programa</div>
              </div>
            </li>                                                      
          </ul>
        </div>
      </div>
    </section>
</div>
<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 18.12.2017 в 15:42

source

3 answers

Trigger with compilation errors Execute cycle while several times once finished

score 0 · Answer 1

What I do not understand is when some> for the son

#grilla-programacion .titulo-de-grilla h2{
  padding-top: 110px;
  font-size: 40px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0;
  margin-bottom: 20px;
}
#grilla-programacion .titulo-de-grilla .texto-degradado {
  background: linear-gradient(#febf0d, #039d7a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#grilla-programacion .grilla ul {
  opacity: 1;
  
}
#grilla-programacion .grilla .contenedor{
  margin: 0 1.5rem;
  width: 5.9%;
  display: inline-block;
  height: 35.75rem;
  transform: skewX(-30deg);
  overflow: hidden;
  backface-visibility: hidden;
}

#grilla-programacion .grilla .contenedor>.contenido-hijo {
  transition: all .3s ease;
  width: 185%;
  height: 380px;
  position: absolute;
  left: -40%;
  top: -1px;
  transform: skewX(30deg);
  z-index: -1;
}
#grilla-programacion .grilla .contenedor>.contenido-hijo:hover {
  transform: translate3d(0, -6.125rem, 0) skewX(30deg);
}

#grilla-programacion .grilla .contenedor img{
  position: absolute;
  top: -15px;
  left: 0;
  width: 100%;
  height: 100%;
  background: center/cover no-repeat;
  display:block;
  border:0;
}

#grilla-programacion .grilla .img-1{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla .img-2{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla .img-3{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla .img-4{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla .img-5{
  background-image: url('../images/img-responsive/imagenes_responsive_0010_Suban el Volumen.jpg');
}
#grilla-programacion .grilla .img-6{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla .img-7{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}

#grilla-programacion .grilla ul li:hover .btn {
    opacity: 1;
}

#grilla-programacion .grilla .btn {
  transition: all .3s ease;
  position: absolute;
  bottom: 4.2rem;
  left: 9rem;
  opacity: 0;
  z-index: 190!important;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
#grilla-programacion .grilla .btn a{
  color: #fff;

}
#grilla-programacion .grilla .titulo{
  position: absolute;
  transition: all .3s ease;
  top: 0;
  z-index: 100!important
}
#grilla-programacion .grilla .titulo h2{
  position: absolute;
  top: -240px;
  left: -8%;
  transition: all .3s ease;
  color: #fff;
  z-index: 1000
}

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

<div id="grilla-programacion" >
    <section class="grilla">
      <div class="container-fluid">
        <div class="row carouselTicker carouselTicker-start">
          <ul class="carouselTicker__list">
            <li class="carouselTicker__item">
              <div class="contenedor"> 
              <a href="#">    
                <div class="contenido-hijo">
                  <img class="img-1" src="">
                  <div class="btn">
                    <div class="titulo">
                      <h2>El Pacto copernico</h2>
                    </div>                 
                    <a href="index.html">Ficha del programa</a>
                  </div>
                </div>
              </a>
              </div>   
            </li>

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">
                <div class="contenido-hijo">
                <img class="img-2" src="">
                <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>
            </li>

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">
                <div class="contenido-hijo">
                  <img class="img-3" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>
            </li>

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">          
                <div class="contenido-hijo">
                  <img class="img-4" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>           
            </li>

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">          
                <div class="contenido-hijo">
                  <img class="img-5" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>          
            </li> 

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">          
                <div class="contenido-hijo">
                  <img class="img-6" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>  
            </li> 

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">          
                <div class="contenido-hijo">
                  <img class="img-7" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>         
            </li>    

            <li class="carouselTicker__item">
              <div class="contenedor">
              <a href="">          
                <div class="contenido-hijo">
                  <img class="img-7" src="">
                  <div class="btn"><a href="index.html">Ficha del programa</a></div>
                </div>
              </a>
              </div>         
            </li>                                                    
          </ul>
        </div>
      </div>
    </section>
</div>

score 0 · Answer 2

Oka. Understood the problem.

You have a problem with the structure. You currently have each Image like this:

<li class="carouselTicker__item">
  <div>
    <img class="img-1" src="">
    <div class="btn">Ficha del programa</div>
  </div>
  <div class="titulo">
    <h2>El Pacto copernico</h2>
  </div>
</li>

And the type mask effect is on the LI tag. You should pass this effect to the div that contains the image and add a class that contains the effect, I recommend something like that to be reusable:

<div class="efecto-mascara-distorsionada">
   <x etiqueta></x etiqueta>
</div>

And in the css:

.efecto-mascara-distorsionada{
  transform: skewX(-30deg);
  overflow: hidden;
}

.efecto-mascara-distorsionada>* {
   transform: skewX(30deg);
}

The asterisk (*) is to indicate that any child of any element with the class "effect-mascara-distorted" will default to those styles. And the selector greater than (>) is to indicate that it will only affect children directly, but not "grandchildren" or "great grandchildren" elements, etc.

This way the title will be outside the effect and will be positioned with respect to the ancestor container, in this case the LI . And in this way, you will not be "disarmed much your design."

Greetings.

Update

I corrected the errata that I put badly in the CSS, here I also leave you a small demo with a few styles, recreating what you want:

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{
  overflow: hidden;
  max-width: 100vw;
}

.grilla{
  padding: 2em;
  width: 120vw;
  transform: translateX(-5%);
}

.contenedor-elementos{
  float: left;
  width: calc( (100% / 3 ) - 5vw );
  min-height: 10em;
  height: 50vh;
  max-height: 20em;
  position: relative;
  list-style: none;
  margin-right: 2vw;
}

.marco-imagen{  
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: inline-block;
}

.efecto-mascara-distorsionada{
  transform: skewX(-30deg);
  overflow: hidden;
}

.efecto-mascara-distorsionada > * {
  transform: skewX(30deg);
}

.imagen{
  position: absolute;
  z-index: 1;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  transition: all ease .5s;
  background-size: cover;
  background-position: center;
}

.contenedor-elementos:hover .imagen{
  transform: skewX(30deg) translateY(-10%);
}

.foto1 .imagen{ background-image: url('http://lorempixel.com/600/600/technics'); }
.foto2 .imagen{ background-image: url('http://lorempixel.com/600/600/city'); }
.foto3 .imagen{ background-image: url('http://lorempixel.com/600/600/sports'); }
.foto4 .imagen{ background-image: url('http://lorempixel.com/600/600/abstract'); }

.titulo{
  display: inline-block;
  padding: 0.51em 1em;
  text-align: center;
  position: absolute;
  font-size: calc(0.8em + 1vw);
  font-family: arial;
  top: -1em; 
  left: 25%;
  color: rgb(240,240,240);
  background-color: rgba(0,0,0,.5);
  text-shadow: 0 0 .5em rgba(0,0,0,.5);
  transition: all ease .5s .2s;
  transform: translateY(100%);
  opacity: 0;
  z-index: 2;
}

.contenedor-elementos:hover .titulo{
  transform: translateY(0%);
  opacity: 1;
}

.link{
  position: absolute;
  bottom: 20%;
  left: 50%;
  transition: all ease .3s .2s;
  transform: skewX(30deg) translate(-50%, 150%);
  z-index: 2;
  background-color: #fff;
  display: inline block;
  padding: 1em 2em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  opacity: 0;
}

.contenedor-elementos:hover .link{
  transform: skewX(30deg) translate(-50%, 0%);
  opacity: 1;
}

<ul class="grilla">
  <li class="contenedor-elementos foto1">
    <!---TODO EN ESTE ELEMENTO ESTARA CON LA MASCARA--->
    <div class="marco-imagen efecto-mascara-distorsionada">
      <figure class="imagen"></figure>
      <a href="#" class="link">link</a>
    </div>
    <!---DESDE AQUI NO SE APLICARA LA MASCARA--->
    <h2 class="titulo">
      TITULO 1
    </h2>
  </li>
  
  <li class="contenedor-elementos foto2">
    <!---TODO EN ESTE ELEMENTO ESTARA CON LA MASCARA--->
    <div class="marco-imagen efecto-mascara-distorsionada">
      <figure class="imagen"></figure>
      <a href="#" class="link">link</a>
    </div>
    <!---DESDE AQUI NO SE APLICARA LA MASCARA--->
    <h2 class="titulo">
      TITULO 2
    </h2>
  </li>
  
  
  <li class="contenedor-elementos foto3">
    <!---TODO EN ESTE ELEMENTO ESTARA CON LA MASCARA--->
    <div class="marco-imagen efecto-mascara-distorsionada">
      <figure class="imagen"></figure>
      <a href="#" class="link">link</a>
    </div>
    <!---DESDE AQUI NO SE APLICARA LA MASCARA--->
    <h2 class="titulo">
      TITULO 3
    </h2>
  </li>
  
</ul>

score 0 · Answer 3

My previous answer, I keep it has the cleanest and tidiest code. However, to help you I started to inspect your css code in detail and I see many errors: Use of very specific selectors, use of backgrounds to the img tag, random use of translate3D or try to fight against the inheritances of your same html structure ; As I had more time, I decided to take the same code from this post and try to overwrite all those styles with others so that "disarmament" does not happen to you and see if the expected solution is finally given.

The first thing I recommend is that you change the html structure in the following way in each LI :

        <li class="carouselTicker__item">
          <!--agregue la clase skew effect-->
          <div class="skew-effect">
            <!--cambie la etiqueta img por figure-->
            <figure class="img-1"></figure>
            <div class="btn">Ficha del programa</div>
          </div>
          <div class="titulo">
            <h2>El Pacto copernico</h2>
          </div>
        </li>

In short:

Add the "skew-effect" class to the div that contains the image and the button.

Change the img tag to figure, since you use background images, which in the image label is an error since the assignment of these must be via Source (src="url"), when it is by background html5 , suggest us the other label figure.

The next thing I did was to take the same CSS file from the first post:

    .carouselTicker{
    overflow-y: hidden;
    height: 280px;   
} 


.carouselTicker__list{
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

.carouselTicker__item{
    margin: 0 0 0 5px;
    float: left;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.carouselTicker__loader{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff url("../images/loader.gif") center center no-repeat;
}

/**
 * CSS style for vertical direction
 **/

.carouselTicker_vertical .carouselTicker__list{
    margin: 0;
}

.carouselTicker_vertical .carouselTicker__item{
    margin: 0 0 5px 0;
    border: 4px solid red;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}


#carouselTicker .carouselTicker__item {
    width: auto;
    height: auto;
    line-height: normal;
}

.carouselTicker__item img {
    vertical-align: top;
}
#grilla-programacion .titulo-de-grilla h2{
  padding-top: 110px;
  font-size: 40px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0;
  margin-bottom: 20px;
}
#grilla-programacion .titulo-de-grilla .texto-degradado {
    background: linear-gradient(#febf0d, #039d7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#grilla-programacion .grilla ul {
  opacity: 1;

}
#grilla-programacion .grilla ul li{
  margin: 0 1.5rem;
  width: 25.9%;
  display: inline-block;
  height: 27.75rem;
  transform: skewX(-30deg);
  overflow: hidden;
  backface-visibility: hidden;

}
#grilla-programacion .grilla ul li>div:hover {
    transform: translate3d(0, -4.125rem, 0) skewX(30deg);
}

#grilla-programacion .grilla ul li>div {
    transition: all .3s ease;
    width: 185%;
    height: 280px;
    position: absolute;
    left: -40%;
    top: -1px;
    transform: skewX(30deg);
}
#grilla-programacion .grilla ul li img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    display:block;
    border:0;
    z-index: 2
}
#grilla-programacion .grilla ul li .img-1{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-2{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-3{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-4{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-5{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-6{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-7{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}

#grilla-programacion .grilla ul li:hover .btn {
    opacity: 1;
}

#grilla-programacion .grilla .btn {
  transition: all .3s ease;
  position: absolute;
  bottom: 4.2rem;
  left: 8.2rem;
  box-shadow: -1.5625rem -0.6875rem 5.4375rem 0 rgba(0,0,0,0.49);
  opacity: 0;
  z-index: 100;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
#grilla-programacion .grilla .titulo{
  position: absolute;
  top: 0;
  z-index: 100!important
}
#grilla-programacion .grilla .titulo h2{
  position: relative;
  top: 0;
  color: #fff;
  z-index: 100!important
}

Under all these styles, add others that overwrite the conflicting styles:

/*ESTO EN EL BODY ES PARA QUE SE PUEDA VER EL TÍTULO*/
body{  background-color: #333;} 

/*ESTO EN LA LISTA ES PARA QUE SE PUEDA VER EL TÍTULO*/    
.carouselTicker__list{
  padding-top: 2em;   
}

#grilla-programacion .grilla ul li{
  transform: none;
  position: relative;
  z-index: 2;
  overflow: visible;
}

#grilla-programacion .grilla ul li>div:hover,
#grilla-programacion .grilla ul li>div.titulo:hover{
  transform: none;
}

#grilla-programacion .grilla ul li>div{ 
  transform: skew(0);
}

.skew-effect{
  transform: skew(-30deg) !important;
  overflow: hidden !important;
}

#grilla-programacion .grilla ul li>div.skew-effect{
  left: 0;
  width: 100%;
  z-index: 1;
}

#grilla-programacion .grilla ul li>div.titulo{
  z-index: 2;
  width: 100%;
  left: 20%;
  height: initial;
  opacity: 0;
}

#grilla-programacion .grilla ul li:hover>div.titulo{
  opacity: 1;
  transform: translateY(-60%);
}

#grilla-programacion .grilla ul li>div.skew-effect>figure,
#grilla-programacion .grilla ul li>div.skew-effect>.btn{
  transform: skewX(30deg);
  display: inline-block;
}

#grilla-programacion .grilla ul li>div.skew-effect>figure{
  position: absolute;
  width: 200%;
  height: 200%;
  top: -25%;
  left: -25%;
}

#grilla-programacion .grilla ul li>div.skew-effect>.btn{
  left: 50%;
  transform: skewX(30deg) translateX(-50%);
  bottom: 25%;
}

As you can see I had to overwrite many styles and using too many specific selectors, of the type:

.class tag-html > tag-html.class, etc

I recommend you not to use so many styles in this way, always try to name each element and do not use labels directly. In general, a maximum of 3 classes is recommended, as follows:

.class-ancestor. container-class .class-element

But with this you should have everything solved, I'll give you an example by taking the codes of your first post, plus what I overwrote:

.carouselTicker{
    overflow-y: hidden;
    height: 280px;   
} 


.carouselTicker__list{
    margin: 10px 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

.carouselTicker__item{
    margin: 0 0 0 5px;
    float: left;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.carouselTicker__loader{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff url("../images/loader.gif") center center no-repeat;
}

/**
 * CSS style for vertical direction
 **/

.carouselTicker_vertical .carouselTicker__list{
    margin: 0;
}

.carouselTicker_vertical .carouselTicker__item{
    margin: 0 0 5px 0;
    border: 4px solid red;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: center;
}


#carouselTicker .carouselTicker__item {
    width: auto;
    height: auto;
    line-height: normal;
}

.carouselTicker__item img {
    vertical-align: top;
}
#grilla-programacion .titulo-de-grilla h2{
  padding-top: 110px;
  font-size: 40px;
  font-family: 'Titillium Web', sans-serif;
  font-weight: 700;
  color: #fff;
  margin: 0;
  margin-bottom: 20px;
}
#grilla-programacion .titulo-de-grilla .texto-degradado {
    background: linear-gradient(#febf0d, #039d7a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#grilla-programacion .grilla ul {
  opacity: 1;
  
}
#grilla-programacion .grilla ul li{
  margin: 0 1.5rem;
  width: 25.9%;
  display: inline-block;
  height: 27.75rem;
  transform: skewX(-30deg);
  overflow: hidden;
  backface-visibility: hidden;

}
#grilla-programacion .grilla ul li>div:hover {
    transform: translate3d(0, -4.125rem, 0) skewX(30deg);
}

#grilla-programacion .grilla ul li>div {
    transition: all .3s ease;
    width: 185%;
    height: 280px;
    position: absolute;
    left: -40%;
    top: -1px;
    transform: skewX(30deg);
}
#grilla-programacion .grilla ul li img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: center/cover no-repeat;
    display:block;
    border:0;
    z-index: 2
}
#grilla-programacion .grilla ul li .img-1{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-2{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-3{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-4{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-5{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-6{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}
#grilla-programacion .grilla ul li .img-7{
  background-image: url('https://d2tt6uttc4o7qf.cloudfront.net/sites/596cf1c8afc5b3395c349466/content_entry596cf1f5afc5b33958807728/596cf21aafc5b3395c3494df/files/slant-super-smash-bros.png?1500312091');
}

#grilla-programacion .grilla ul li:hover .btn {
    opacity: 1;
}

#grilla-programacion .grilla .btn {
  transition: all .3s ease;
  position: absolute;
  bottom: 4.2rem;
  left: 8.2rem;
  box-shadow: -1.5625rem -0.6875rem 5.4375rem 0 rgba(0,0,0,0.49);
  opacity: 0;
  z-index: 100;
  font-family: 'Titillium Web', sans-serif;
  font-style: italic;
  font-size: 2rem;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
}
#grilla-programacion .grilla .titulo{
  position: absolute;
  top: 0;
  z-index: 100!important
}
#grilla-programacion .grilla .titulo h2{
  position: relative;
  top: 0;
  color: #fff;
  z-index: 100!important
}

/*=============================
________________________________
A PARTIR DE AQUI AGREGO ESTILOS
͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞ ͞ ͞ ͞ ͞͞͞͞ ͞
===============================*/

/*BORRAR ESTO, ES SOLO PARA VER EL TÍTULO*/
body{  background: #333 !important; }

.carouselTicker__list{
  padding-top: 2em;  /*LA MEDIDA QUE PREFIERAS*/   
}

#grilla-programacion .grilla ul li{
  transform: none;
  position: relative;
  z-index: 2;
  overflow: visible;
}

#grilla-programacion .grilla ul li>div:hover,
#grilla-programacion .grilla ul li>div.titulo:hover{
  transform: none;
}

#grilla-programacion .grilla ul li>div{ 
  transform: skew(0);
}

.skew-effect{
  transform: skew(-30deg) !important;
  overflow: hidden !important;
}

#grilla-programacion .grilla ul li>div.skew-effect{
  left: 0;
  width: 100%;
  z-index: 1;
}

#grilla-programacion .grilla ul li>div.titulo{
  z-index: 2;
  width: 100%;
  left: 20%; /*la medida que prefieras*/
  height: initial;
  opacity: 0;
}

#grilla-programacion .grilla ul li:hover>div.titulo{
  opacity: 1;
  transform: translateY(-50%); /*el porcentaje que prefieras*/
}

#grilla-programacion .grilla ul li>div.skew-effect>figure,
#grilla-programacion .grilla ul li>div.skew-effect>.btn{
  transform: skewX(30deg);
  display: inline-block;
}

#grilla-programacion .grilla ul li>div.skew-effect>figure{
  position: absolute;
  width: 100vw; /*la medida que prefieras*/ 
  height: 100%; /*la medida que prefieras*/ 
  top: -25%; /*la medida que prefieras*/ 
  left: -50vw; /*la medida que prefieras*/ 
}

#grilla-programacion .grilla ul li>div.skew-effect>.btn{
  left: 50%; /*la medida que prefieras*/ 
  transform: skewX(30deg) translateX(-50%);
  bottom: 25%; /*la medida que prefieras*/ 
}

/*LOS ESTILOS A CONTINUACIÓN LOS PUEDES IGNORAR, FUERON SIMPLEMENTE PARA VER LAS IMAGENES*/

#grilla-programacion .grilla ul li .img-1{
  background-image: url('http://lorempixel.com/600/600/sports');
}
#grilla-programacion .grilla ul li .img-2{
  background-image: url('http://lorempixel.com/600/600/people');
}
#grilla-programacion .grilla ul li .img-3{
  background-image: url('http://lorempixel.com/600/600/city');
}
#grilla-programacion .grilla ul li .img-4{
  background-image: url('http://lorempixel.com/600/600');
}
#grilla-programacion .grilla ul li .img-5{
  background-image: url('http://lorempixel.com/600/600');
}
#grilla-programacion .grilla ul li .img-6{
  background-image: url('http://lorempixel.com/600/600');
}
#grilla-programacion .grilla ul li .img-7{
  background-image: url('http://lorempixel.com/600/600');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="grilla-programacion">
    <section class="grilla">
      <div class="container-fluid">
        <div class="row carouselTicker carouselTicker-start">
          <ul class="carouselTicker__list">

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-1"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>            

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-2"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>           

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-3"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>            

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-4"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>              

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-5"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>             

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-6"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>            

            <li class="carouselTicker__item">
              <div class="skew-effect"> 
                <figure class="img-7"></figure>
                <div class="btn">Ficha del programa</div>
              </div>
              <div class="titulo">
                <h2>El Pacto copernico</h2>
              </div>
            </li>  
                                                
          </ul>
        </div>
      </div>
    </section>
</div>

I hope now, do not disarm hehehe.

But me that you rethink me, again make the styles of this carousel for something less complex, because probably in the future, will continue to give you problems. Greetings.