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:
- Agregue la clase "skew-effect" al div que contiene la imagen y el boton.
- 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.