Tengo un div que al hacer hover, cambia de color a negro con opacidad. Dentro de este div, tengo un botón de "VER MÁS" que quiero que aparezca encima del color negro que aparece de fondo. Ahora mismo me aparece debajo del fondo.
<div class="col-md-6 col-sm-12 text-center coleccion-left coleccion-hover" id="coleccion-principal" style="background: #006837;">
<a class="btn-colecciones" href="/moda/">VER MÁS</a>
<div class="colecciones-moda-img col-img-hover"></div>
<div class="colecciones-moda-text colecciones-text text-white">MODA</div>
</div>
#coleccion-principal:hover{
background-color: rgba(0,0,0,0.8);
filter:brightness(0.4);
z-index: 10 !important;
position: relative;
}
.btn-colecciones{
display: none;
position: absolute;
top: 50%;
right: 40%;
width: 150px;
height: 50px;
border: 2px solid #fff;
background: none;
color: #fff;
transform: translate(.50%, -50%);
}
.coleccion-hover:hover > .btn-colecciones{
display: block;
padding-top: 10px;
z-index: 99999 !important;
}
Gracias