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. 

¿Cómo podría hacer para que `.excerpt` aparezca sobre `.poster`?

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


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->