Tengo un problema con la creación de un elemento transparente que tiene un elemento secundario. Usando este código, el elemento hijo obtiene el valor de opacidad del elemento padre.

Necesito restablecer / establecer la opacidad del elemento del niño en un valor arbitrario. El navegador de referencia esMaple Browser (for a Samsung TV Application).

 .video-caption {
        position: absolute;
        top:50px;
        width: 180px;
        height: 55px;
        background-color: #000;
        -khtml-opacity:.40; 
        -moz-opacity:.40; 
        -ms-filter:"alpha(opacity=40)";
        filter:alpha(opacity=40);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.4); /*just for testing*/
        opacity:.40; 
    }
    .video-caption > p {
        color: #fff !important;
        font-size: 18px;
        -khtml-opacity:1; 
        -moz-opacity:1; 
        -ms-filter:"alpha(opacity=100)";
        filter:alpha(opacity=100);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);
        opacity:1; 
    }

MARCAR EDITAR

<div> <img id="videothb-1" src="https://xxxxx/splash.jpg"> <div class="video-caption"> <p>Description here</p> </div> </div>