Skip to main content
1 de 6

Cambiar la opacidad y estilos de diferentes divs cuando paso el raton por encima

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;

    }