El código es este: <div class=" pilot tetsuta"> <div class="about-tetsuta"> Habitual del campeonato japonés, Nagashima fue segundo en la categoría J-GP3 en 2012, sexto en la J-GP2 en 2013 a los mandos de una TSR y vigésimo en el debut mundialista en el Gran Premio de Japón, dentro del equipo JiR. En 2014 disputaba 12 Grandes Premios y en 2016 participaba en dos rondas en condición de wildcard y conseguía sus primeros puntos en el campeonato aparte de participar en el FIM CEV Repsol donde conseguía el subcampeonato. En 2017 forma parte del Teluru SAG Team. </div> <div class="container-name"> <span class="name">Tetsuta Nagashima</span> <br> <span class="info">Kanagawa, Japón | 02/07/92 | 175cm | 61kg</span> </div> <div class="container-stats tetsuta"> <div class="stat"> <img src="random.png"/> <br><br> <span id="podium-tetsuta">0</span> Podios </div> <div class="stat"> <img src="random.png"/> <br><br> <span id="lap-tetsuta">0</span> Vueltas rápidas </div> <div class="stat"> <img src="random.png"/> <br><br> <span id="gp-tetsuta">27</span> GP Disputados </div> </div> </div> Lo que quiero hacer es cuando pase el mouse por encima de el div con clase pilot tetsuta pase a estar como "background" (es decir, jugar con el opacity como digo en el titulo), y pase a ser visible el div con clase about-tetsuta ocupando todo el div pilot tetsuta. (Solo quedando visible la imagen que tengo como background del div pilot tetsuta), en cambio los divs con class container-name y container-stats pasarían a no ser visibles. El código que he hecho para intentar hacerlo es este: .pilot.tetsuta:hover{ opacity: 0.9; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; -ms-transition: opacity 500ms; transition: opacity 500ms; color: #834c4c; } .about-tetsuta{ position:absolute; top:0; left:0; z-index:-1; padding:70px; margin:0; color: #FFF; text-align: center; font-size: 30px; }