1

Lo que quiero hacer es cuando pase el ratón por encima de el div con clase "pilot tetsuta" pase a estar como background (es decir, jugar con el opacity como digo en el título), 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 clase "container-name" y "container-stats" pasarían a no ser visibles.

El código que he hecho para intentar hacerlo es éste:

.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>

Ahora mismo paso el ratón por encima y el opacity 0.9 se aplica en todo el div con clase "pilot tetsuta", me gustaría que tanto el div con clase "container-name" como el de "status", se quedaran NO visibles para el usuario.

Después de eso habría que hacer que el div "about-tetsuta" ocupara todo el div "pilot-tetsuta" ya que no me lo ocupa (una solución rápida seria ponerle un padding) pero entonces tendría que utilizar media query para los diferentes tamaños.

Como se ve sin hover:

introducir la descripción de la imagen aquí

Como quiero que se vea:

introducir la descripción de la imagen aquí

Como se ve cuando hago hover actualmente:

introducir la descripción de la imagen aquí

3
  • 1
    Qué falla ahora mismo o qué está funcionando?
    – Flowen
    Commented el 30 ago. 2017 a las 12:24
  • Lo ideal sería usar javascript, hay alguna razón por lo que lo necesites con css?
    – Flowen
    Commented el 30 ago. 2017 a las 12:34
  • La verdad es que no, podría hacerlo con JS también. Commented el 30 ago. 2017 a las 12:37

2 respuestas 2

4

El problema de aplicar una opacidad al contenedor padre es que se aplicará a todos los elementos contenidos en él. Es algo tedioso, pero sería mejor aplicar el CSS a los elementos hijos en lugar de al padre.

Entonces lo que habría que hacer sería:

  • Ponerle una posición relativa al div contenedor (".pilot.tetsuta")
  • Cuando se pase el ratón por encima del contendor, esconder "container-name" y "stats" (cambiando su opacidad como le estabas haciendo al padre)
  • Ponerle posición absoluta al "about" (ya lo tienes) y que ocupe todo el tamaño del contenedor, esconderlo de primeras y mostrarlo cuando el ratón se pase por encima.

Algo como esto:

.pilot.tetsuta {
  position: relative;
  background-image: url(http://lorempixel.com/400/400/cats);
  background-repeat: no-repeat;
  background-size: cover;
}


/* esto antes aplicaba al padre, ahora sólo a ciertos descendientes */

.pilot.tetsuta:hover>.container-name,
.pilot.tetsuta:hover>.container-stats {
  opacity: 0.6;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  -o-transition: all 500ms;
  -ms-transition: all 500ms;
  transition: all 500ms;
  color: #834c4c;
}


/* mostramos el about cuando el ratón se ponga encima del padre */

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


/* hacemos que ocupe todo y que esté oculto de primeras con opacity 0 */

.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.4);
  -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="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>

4
  • Continuemos el debate en el chat. Commented el 30 ago. 2017 a las 13:47
  • pregunta editada Commented el 31 ago. 2017 a las 7:11
  • El nuevo problema parece que es algún estilo externo (en concreto un line-height) que podría estar afectando ese contenido y por eso se vería tan junto. Deberías inspeccionar tu código (las herramientas del programador se abren con F12) y ver si hay algún estilo que se le esté aplicando de más.
    – Alvaro Montoro
    Commented el 31 ago. 2017 a las 11:19
  • Ya esta todo, gracias ;) Commented el 31 ago. 2017 a las 13:22
0

Puedes utilizar JQuery para realizarlo. Con un solo hover realizas todas las acciones necesarias.

//Hover sobre el div general tetsusa
$(".tetsusa").hover(function(){
    //Aplicamos opacidad a cada div segun quieras
    $(".tetsusa").css({opacity:0.5});
    $(".container-name").css({opacity:0.9});
    $(".container-stats").css({opacity:0.9});
});

Modifica las opacidades a tu gusto, son valores de ejemplo.

En el archivo css deja los valores como quieres que se muestren por defecto.

1
  • Sabeis si hay alguna manera de subir una foto de como se ve? Tengo el como se ve y como se tiene que ver, y la verdad es que no me acaba de funcionar bien. Commented el 30 ago. 2017 a las 12:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.