3

Estoy haciendo un theme de WordPress donde, al hacer hover en la img, se le superpone un cuadrito verde con el texto de "ver tráiler" y aparece un recuadro .excerpt con posición absoluta a la izquierda. Mi problema es que .excerpt aparece detrás del resto de los elementos, y eso que le coloqué el z-index 1 a .poster que tiene posición relativa y .excerpt un z-index 999 que tiene posición absoluta.

El problema surge cuando se agregan varias veces ese mismo article. Porque los article tapan el .excerpt ¿Cómo podría hacer para que .excerpt aparezca sobre .poster?

Éste es mi código (cambiando el PHP por valores de ejemplo):

.poster{
  background-color: #AFD139;
  width:100%;
  height:200px;
  position: relative;
  z-index:1;
}

.poster strong {
    position: absolute;
    top: 50%;
    margin-top: -22px;
    line-height: 20px;
    padding-top: 25px;
    width: 100%;
    left: 0;
    opacity: 0;
    color:#fff;
    text-align:center;
}

 .ico{background: url(./img/bg.png) no-repeat;}

.poster strong .ico{
  width: 30px;
  height: 19px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -15px;
}

.poster:hover{background-color: #AFD139;}
.poster:hover strong{opacity:1;color:#fff;}
.poster:hover img{opacity:0.2;}
.poster:hover .excerpt{display:block;}

.poster img{
  width:100%;
  height:200px;
}

.excerpt{
  width: 290px;
  background-color: #323232;
  padding: 10px;
  top: -11px;
  right: -341px;
  position:absolute;
  z-index:999;
  display:none;
}

.excerpt i{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #323232;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -10px;
  top: 10px;
}

.excerpt h2{
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
  color:#fff!important;
  margin:0;
}

.excerpt p{
  border-top: 1px solid #444;
  border-bottom: 1px solid #222;
  padding: 10px 0;
  color: #999;
  line-height: 15px;
  font-weight: 100;
}

 .mov-medium > p{
  height:33px;
  max-height:33px;
  overflow:hidden;
  margin:1rem 0;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<article class="col-xs-12  col-sm-12  col-md-3  col-lg-3">
    <div class="mov-medium">
        <a href="#">
            <div class="poster">
                <img src="http://lorempixel.com/500/300/cats">
                <strong>
                    <i class="ico"></i>
                    VER TRAILER
                </strong>

                <div class="excerpt">
                    <i></i>
                    <h2>EL TITULO</h2>
                    El extracto
                </div>

            </div>
        </a>
        <p>EL TITULO</p>
    </div>                                                        
</article>

<article class="col-xs-12  col-sm-12  col-md-3  col-lg-3">
    <div class="mov-medium">
        <a href="#">
            <div class="poster">
                <img src="http://lorempixel.com/500/300/nature">
                <strong>
                    <i class="ico"></i>
                    VER TRAILER
                </strong>

                <div class="excerpt">
                    <i></i>
                    <h2>EL TITULO 2</h2>
                    El extracto 2
                </div>

            </div>
        </a>
        <p>EL TITULO 2</p>
    </div>                                                        
</article>

5
  • El problema no es que el z-index no funcione, sino dónde se coloca el extracto. Tal y como está posicionado ahora debería verse bien y aplicarse el z-index sin incidentes... pero está colocado en una posición que lo deja fuera de la vista para xs y sm, sí estando visible para md y lg (puedes verlo ejecutando el ejemplo -que es tu código sin cambios, sólo hecho ejecutable-, pulsando en el botón de pantalla completa y cambiando el tamaño de la ventana). Para md y lg se ve a la derecha; para xs y sm no se ve porque queda fuera de la vista (mira como se activan los scrollers).
    – Alvaro Montoro
    Commented el 1 jul. 2017 a las 13:24
  • Claro, pero como es un efecto que sale solo en hover, y los dispositivos XS y SM son tactiles, no me preocupa que no se vean con esas resoluciones. El problema es que lo estoy ejecutando con resolucion LG y no se ve :/ Commented el 1 jul. 2017 a las 13:40
  • 1
    yo no veo ningun problema! con lo mencionado y comentado hasta ahora. se ve perfectamente Commented el 1 jul. 2017 a las 13:57
  • El problema surge cuando se agregan varias veces ese mismo article. Porque los article tapan el .excerpt Commented el 1 jul. 2017 a las 14:38
  • Ahora. Esa información es clave y no aparecía en la pregunta. La he editado para que se vea el problema.
    – Alvaro Montoro
    Commented el 1 jul. 2017 a las 15:03

2 respuestas 2

1

El problema surge porque los z-index de los padres afectan a los hijos; es decir, el z-index de un elemento limitará al de los elementos contenidos. Aunque .excerpt tenga un z-index de 999, como .poster tiene un z-index de 1, ése es el que se le va a aplicar (el 999 afectará internamente dentro de .poster pero no con los elementos de alrededor).

Entonces una solución rápida a tu problema sería quitar el z-index de poster:

.poster{
  background-color: #AFD139;
  width:100%;
  height:200px;
  position: relative;
}

.poster strong {
    position: absolute;
    top: 50%;
    margin-top: -22px;
    line-height: 20px;
    padding-top: 25px;
    width: 100%;
    left: 0;
    opacity: 0;
    color:#fff;
    text-align:center;
}

 .ico{background: url(./img/bg.png) no-repeat;}

.poster strong .ico{
  width: 30px;
  height: 19px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -15px;
}

.poster:hover{background-color: #AFD139;}
.poster:hover strong{opacity:1;color:#fff;}
.poster:hover img{opacity:0.2;}
.poster:hover .excerpt{display:block;}

.poster img{
  width:100%;
  height:200px;
}

.excerpt{
  width: 290px;
  background-color: #323232;
  padding: 10px;
  top: -11px;
  right: -341px;
  position:absolute;
  z-index:999;
  display:none;
}

.excerpt i{
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #323232;
  border-bottom: 10px solid transparent;
  position: absolute;
  left: -10px;
  top: 10px;
}

.excerpt h2{
  line-height: 20px;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 10px;
  border-bottom: 1px solid #222;
  color:#fff!important;
  margin:0;
}

.excerpt p{
  border-top: 1px solid #444;
  border-bottom: 1px solid #222;
  padding: 10px 0;
  color: #999;
  line-height: 15px;
  font-weight: 100;
}

 .mov-medium > p{
  height:33px;
  max-height:33px;
  overflow:hidden;
  margin:1rem 0;
 }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<article class="col-xs-12  col-sm-12  col-md-3  col-lg-3">
    <div class="mov-medium">
        <a href="#">
            <div class="poster">
                <img src="http://lorempixel.com/500/300/cats">
                <strong>
                    <i class="ico"></i>
                    VER TRAILER
                </strong>

                <div class="excerpt">
                    <i></i>
                    <h2>EL TITULO</h2>
                    El extracto
                </div>

            </div>
        </a>
        <p>EL TITULO</p>
    </div>                                                        
</article>

<article class="col-xs-12  col-sm-12  col-md-3  col-lg-3">
    <div class="mov-medium">
        <a href="#">
            <div class="poster">
                <img src="http://lorempixel.com/500/300/nature">
                <strong>
                    <i class="ico"></i>
                    VER TRAILER
                </strong>

                <div class="excerpt">
                    <i></i>
                    <h2>EL TITULO 2</h2>
                    El extracto 2
                </div>

            </div>
        </a>
        <p>EL TITULO 2</p>
    </div>                                                        
</article>

1
  • Listo, solventado. Ese era el problema. Muchas gracias Commented el 1 jul. 2017 a las 15:36
0

Cambia el orden en el HTML pon primero el strong y después el img con lo q el orden ira implícito.

1
  • Se continua tapando el .excerpt con el article que tiene a la derecha. Commented el 1 jul. 2017 a las 14:47

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.