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