0

Estoy queriendo agregar un titulo para cada imagen cuando hace el hover y quisiera ubicarlo como el ejemplo de la imagen adjunta, el problema que estuve probando y no me deja posicionarlo por encima de la imagen y que quede en el limite del top, porque puede ser que no me tome el posición y el z index? ejemplo El js adjunto es porque las imagenes son un carousel, pero no le den bolilla eso.

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

7
  • Hola, No entiendo a qué te refieres, el título SI se está posicionando encima de la imagen, según el código que colocas. ¿O te refieres a que también está siendo recortado por la forma? por cierto no sirve mucho que coloques numeros tan grandes para el z-index a menos que tengas múltiples niveles de capa o estes haciendo una aplicación bastante compleja, recomiendo dejarlo del 1 al 10, a parte este atributo tiene varias condiciones de herencia para que funcione, que tienen que ver con el orden de las etiquetas y su posicionamiento, es decir no solo el numero. Commented el 18 dic. 2017 a las 18:25
  • Hola Edgar, entiendo lo que me decís, solo estaba probando por eso puse numero grande, por otro lado lo que quiero yo es que el contenido del hover este por afuera de la caja torcida. Seria como la imagen que adjunte. donde el contenido esta pro afuera y puede sobre salir de la caja. Lo que me hace acá es como una especie de mascara donde el contenido esta por dentro del cuadrado..
    – MarianoF
    Commented el 18 dic. 2017 a las 18:31
  • qkstudiodemo.com/radiocantilo/html/grilla-de-programacion.html este es el ejmplo que arme
    – MarianoF
    Commented el 18 dic. 2017 a las 18:32
  • Ok. El problema es que efectivamente, existe una "máscara" creada por el elemento <LI>, el overflow que hace la forma rectangular, todo lo que esté contenido en este, sin excepción, quedará recortado por la "máscara". Te recomiendo que user el overflow y la deformación "skew" en el div. Y de esta manera evitas que sea recortado. Por cierto, lo mejor es usar codepen.io o jsfiddle para tus ejemplos online. Commented el 18 dic. 2017 a las 18:34
  • claro, si entiendo lo que me decís, pero no tuve bueno resultados. quise sacarle las propiedades al LI y dárselo al DIV y se me desarmo todo.
    – MarianoF
    Commented el 18 dic. 2017 a las 18:40

3 respuestas 3

0

Lo que no comprendo es cuando unas >* para el hijo

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

4
  • Uso el selector avanzado ">", porque significa hijo directo y el asterisco (*) para indicar que los estilos se aplican a cualquier elemento hijo, aqui más sobre este selector: Selectores Universales | Mozzila. Commented el 19 dic. 2017 a las 0:24
  • Hola edgar buen dia, muchas gracias por el aporte la verdad es que muy util y muy bien explicado. El unico problema que tuve con el ejemplo que me pasaste ayer fue con respecto a los link de los a de ficha de programa que le quise poner su respectivo enlace y no me direccionaba. te paso el link de como quedo el sitio. qkstudiodemo.com/radiocantilo/html/grilla-de-programacion.html por que si bien el a quedo por encima de la imagen es raro que no tome el enlace.
    – MarianoF
    Commented el 19 dic. 2017 a las 12:09
  • Ya lo arreglaste, veo que ya funciona. Commented el 19 dic. 2017 a las 14:29
  • Hola Edgar si si el único problema que surgió es en el botón de ficha que le puse un enlace pero no funciona no me redirecciona, nose si es porque el botón quedo dentro de el recuadro contenedor y no esta por fuera. puede ser?
    – MarianoF
    Commented el 19 dic. 2017 a las 14:38
0

Oka. Entendido el problema.

Tienes un problema con la estructura. Actualmente tienes cada Imagen así:

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

Y el efecto de máscara tipo está sobre la etiqueta LI. Deberías de pasar este efecto al div que contiene la imagen y agregale una clase que contenga el efecto, te recomiendo algo así para que quede reusable:

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

Y en el css:

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

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

El asterisco (*) es para indicarle que cualquier hijo de cualquier elemento con la clase "efecto-mascara-distorsionada" va a tener por defecto esos estilos. Y el selector mayor que (>) es para indicarle que solo afectara a los hijos directamente, más no a elementos "nietos" o "biznietos", etc.

De esta manera el título quedará por fuera del efecto y se posicionará respecto al contenedor ancestro, en este caso el LI. Y de esta forma, no se te "desarmará mucho tu diseño".

Saludos.


Actualización

Corregí Las erratas que puse mal en el CSS, acá también te dejo un pequeño demo con unos cuantos estilos, recreando lo que quieres:

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

8
  • Estoy probando lo que me dijiste Edgar pero no puedo lograr hacerlo andar. Si bien cambie las clases del LI a un div no me funciono porque se me rompe todo.
    – MarianoF
    Commented el 18 dic. 2017 a las 19:06
  • el ejemplo de como funciona lo saque de aca igxgamingexpo.com
    – MarianoF
    Commented el 18 dic. 2017 a las 19:07
  • ¿Podrías actualizar tu respuesta con el código actualizado? Es para ver como solucionamos el desarme. Commented el 18 dic. 2017 a las 19:19
  • Si te fijas en igxgamingexpo.com ellos usan algo similar a lo que te coloco, ellos usan la clase: unskewed-container unskewed-image-container y en los elementos hijos unskewed. Y el logo está por fuera del elemento enmascarado. Commented el 18 dic. 2017 a las 19:20
  • Si si probé el mismo ejemplo quise tambien tomar ese ejemplo, pero no hubo caso. seguiré probando.
    – MarianoF
    Commented el 18 dic. 2017 a las 19:25
0

Mi anterior respuesta, la mantengo tiene el código más limpio y ordenado. Sin embargo, para ayudarte me puse a inspeccionar al detalle tu código css y veo muchos errores: Uso de selectores muy específicos, uso de backgrounds a la etiqueta img, uso al azar de translate3D o tratar de luchar contra las herencias de tu misma estructura html; como tenía más tiempo, me di a la tarea de coger el mismo código de este post y tratar de sobreescribir todos esos estilos con otros para que no te suceda "el desarme" y ver si por fin se da la solución esperada.

Lo primero que te recomiendo es que cambies la estructura html de la siguiente forma en cada 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>

En resumidas cuentas:

  1. Agregue la clase "skew-effect" al div que contiene la imagen y el boton.
  2. Cambie la etiqueta img por figure, ya que usas imágenes de fondo, cosa que en las etiqueta de imagen es un error ya que la asignación de estas debe ser via Source (src="url"), cuando sea por background html5, nos sugiere la otra etiqueta figure.

Lo siguiente que hice fue coger el mismo archivo CSS del primer 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
}

Debajo de todos estos estilos agregue otros que sobrescriben los estilos en conflicto:

/*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%;
}

Como ves tuve que sobreescribir muchos estilos y usando demasiados selectores específicos, del tipo:

.clase etiqueta-html > etiqueta-html.clase, etc

Te recomiendo no usar tantos estilos de esta forma, trata siempre de ponerle un nombre a cada elemento y no usar etiquetas directamente. En forma general se recomienda un máximo de 3 clases, de esta manera:

.clase-ancestro .clase-contenedor .clase-elemento

Pero con esto ya deberías de tener todo solucionado, te pongo un ejemplo cogiendo los códigos de tu primer post, más lo que sobrescribí:

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

Espero ahora si, no se te desarme jejeje.

Pero yo que tu me replanteo, nuevamente hacer los estilos de este carrusel por algo menos complejo, porque probablemente en un futuro, va a seguir dandote problemas. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.