Mostrar div en vuelo estacionario en la misma position

Estoy tratando de mostrar div en mouseover, pero está parpadeando, ¿cómo puedo mostrar / ocultar sin ningún tipo de imbécil y sin problemas con la transición?

He intentado el fundido de input / salida usando jquery también, pero todavía parpadeando.

Aquí está el código

body { margin: 0; } .row { float: left; width: 100%; } .col { float: left; width: 25%; position: relative; margin: 0 10px 0 0; } .front { width: 100%; height: 300px; background-color: #999 } .back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%; } .front:hover + .back { opacity: 1; visibility: visible; } 
 <div class="row"> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> </div> 

Parpadea porque cada vez que se vuelve .back , pasa el cursor por .front ya no es válido. Para solucionar esto, puede establecer la visibilidad de .back como visible en .back:hover que se puede hacer utilizando el mismo estilo CSS para .back:hover como para .front:hover + .back

 body { margin: 0; } .row { float: left; width: 100%; } .col { float: left; width: 25%; position: relative; margin: 0 10px 0 0; } .front { width: 100%; height: 300px; background-color: #999 } .back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%; } .front:hover + .back, .back:hover { opacity: 1; visibility: visible; } 
 <div class="row"> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> </div> 
 body { margin: 0; } .row { float: left; width: 100%; } .col { float: left; width: 25%; position: relative; margin: 0 10px 0 0; } .front { width: 100%; height: 300px; background-color: #999 } .back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%; } .col:hover > .back { opacity: 1; visibility: visible; } 
 <div class="row"> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> </div> 

El problema es que cuando desplazas el .front div aparece el .back div, de modo que ahora estás moviendo el .back div no el .front para que desaparezca de nuevo, y el loop continúa. Para solucionar esto, agrega el efecto de desplazamiento al .back div también. Agregue transition a .back para un efecto suave.

 body { margin: 0; } .row { float: left; width: 100%; } .col { float: left; width: 25%; position: relative; margin: 0 10px 0 0; } .front { width: 100%; height: 300px; background-color: #999 } .back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%; transition: 0.2s ease; } .front:hover + .back, .back:hover { opacity: 1; visibility: visible; } 
 <div class="row"> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> <div class="col"> <div class="front">This is front div</div> <div class="back">This is back div</div> </div> </div> 

¿Qué pasa si coloca el elemento .back dentro del elemento .col , mueve los styles de elementos .col elemento .col y agrega la transition al elemento .col ? Creo que es una mejor solución en vista del apoyo de los browseres.

 body { margin: 0; } .row { float: left; width: 100%; } .col { float: left; width: 25%; position: relative; margin: 0 10px 0 0; height: 300px; background-color: #999 } .back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%; transition: all 0.2s; } .col:hover .back { opacity: 1; visibility: visible; } 
 <div class="row"> <div class="col"> This is front part <div class="back">This is back part</div> </div> <div class="col"> This is front part <div class="back">This is back part</div> </div> <div class="col"> This is front part <div class="back">This is back part</div> </div> </div> 

El principal problema es que no has podido saber quién realmente "dispara" la "animation". Tanto el front como el back están en el mismo nivel, por lo que no es posible hacerlo desde ese nivel, pero si lo haces a través del elemento principal, debería funcionar.

El enfoque sería el siguiente:

 .col:hover .back { opacity: 1; visibility: visible; }