Skip to main content
se añadieron 155 caracteres en el cuerpo
Origen Enlace

Como se ve sin hover:

introducir la descripción de la imagen aquí

Como se ve cuando hago hover actualmente:

introducir la descripción de la imagen aquí

Como se ve:

introducir la descripción de la imagen aquí

Como se ve sin hover:

introducir la descripción de la imagen aquí

Como se ve cuando hago hover actualmente:

introducir la descripción de la imagen aquí

se añadieron 215 caracteres en el cuerpo
Origen Enlace
.pilot.tetsuta{
    background-image: url('https://cloud.modyocdn.com/uploads/c8d5a62d-7b6e-4a70-a1e8-348c7044a3a2/original/tetsutav2.jpg');
    color: #FFF;
    position: relative;
}
.pilot.tetsuta:hover > .container-name,
.pilot.tetsuta:hover > .container-stats {
    opacity: 0.9;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    transition: opacity 500ms;
    color: #834c4c;
}

.pilot.tetsuta:hover > .about-tetsuta {
    opacity:1;
}

.about-tetsuta {
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    color: #FFF;
    text-align: center;
    font-size: 30px;
    opacity:0;
    z-index:2;
    background:rgba(0,0,0,0.6);
    -1;webkit-transition: opacity 500ms;
  padding  -moz-transition: 70px;opacity 500ms;
    -o-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    transition: opacity 500ms;
    margin: 0;10px;
}

.about-tetsuta .name{
  color  font-family: #FFF;'Montserrat-Black';
    text-aligntransform: center;uppercase;
    font-size: 30px;36px;
    margin-top: 10px;
}
<div class=" pilot tetsuta">
  <div class="about-tetsuta">
    <span class="name">Tetsuta Nagashima</span>
    <br>
    <span class="about">
    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.
    </span>
</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="randomsrc="https://cloud.modyocdn.com/uploads/8f9cd150-1aaf-4dad-8456-810ff6700aa4/original/podium_icono_blanc.png" />
        <br><br>
        <span id="podium-tetsuta">0</span> Podios
    </div>
    <div class="stat">
        <img src="randomsrc="https://cloud.modyocdn.com/uploads/7d47e82b-aea2-4843-a021-2841a77056c9/original/tiempo_icono_blanco.png" />
        <br><br>
        <span id="lap-tetsuta">0</span> Vueltas rápidas
    </div>
    <div class="stat">
        <img src="randomsrc="https://cloud.modyocdn.com/uploads/c7654ce4-acba-4581-9e85-4801385f80cb/original/GP_icono_blanco.png" />
        <br><br>
        <span id="gp-tetsuta">27</span> GP Disputados
    </div>
  </div>
</div>
.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;
}
<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>
.pilot.tetsuta{
    background-image: url('https://cloud.modyocdn.com/uploads/c8d5a62d-7b6e-4a70-a1e8-348c7044a3a2/original/tetsutav2.jpg');
    color: #FFF;
    position: relative;
}
.pilot.tetsuta:hover > .container-name,
.pilot.tetsuta:hover > .container-stats {
    opacity: 0.9;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    transition: opacity 500ms;
    color: #834c4c;
}

.pilot.tetsuta:hover > .about-tetsuta {
    opacity:1;
}

.about-tetsuta {
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    right:0;
    color: #FFF;
    text-align: center;
    font-size: 30px;
    opacity:0;
    z-index:2;
    background:rgba(0,0,0,0.6);
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    -ms-transition: opacity 500ms;
    transition: opacity 500ms;
    margin: 10px;
}

.about-tetsuta .name{
    font-family: 'Montserrat-Black';
    text-transform: uppercase;
    font-size: 36px;
    margin-top: 10px;
}
<div class=" pilot tetsuta">
<div class="about-tetsuta">
    <span class="name">Tetsuta Nagashima</span>
    <br>
    <span class="about">
    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.
    </span>
</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="https://cloud.modyocdn.com/uploads/8f9cd150-1aaf-4dad-8456-810ff6700aa4/original/podium_icono_blanc.png"/>
        <br><br>
        <span id="podium-tetsuta">0</span> Podios
    </div>
    <div class="stat">
        <img src="https://cloud.modyocdn.com/uploads/7d47e82b-aea2-4843-a021-2841a77056c9/original/tiempo_icono_blanco.png"/>
        <br><br>
        <span id="lap-tetsuta">0</span> Vueltas rápidas
    </div>
    <div class="stat">
        <img src="https://cloud.modyocdn.com/uploads/c7654ce4-acba-4581-9e85-4801385f80cb/original/GP_icono_blanco.png"/>
        <br><br>
        <span id="gp-tetsuta">27</span> GP Disputados
    </div>
</div>
</div>
se añadieron 256 caracteres en el cuerpo
Origen Enlace

Como se ve:

introducir la descripción de la imagen aquí

Como quiero que se vea:

introducir la descripción de la imagen aquí

Como se ve:

introducir la descripción de la imagen aquí

Como quiero que se vea:

introducir la descripción de la imagen aquí

Hacer código ejecutable + correcciones de ortografía
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190
Loading
etiquetas editadas
Enlace
Loading
Origen Enlace
Loading