[SOLUCIONADO] Ejecutar animación compleja.

[EGTCom]

Buenos días a tod@s,

Os cuento, estoy terminando una web cuyo enlace os dejo aquí: www.egtcom.es

y tengo un problema. Si os fijais en el index existe un apartado llamado ¿Cómo trabajamos? con 4 cajas. Si pasas el ratón por encima de estas cajas estas se desplazan hacia arriba; y si además pasas el ratón por encima de los pequeños iconos (lupa, engranaje y cohete) estos tienen su correspondiente animación.

Mi problema es que me gustaría que dicha animación se ejecutase al pasar el ratón por cualquier parte de la caja que los contiene y que no fuera necesario pasarlo específicamente por encima del icono en cuestión.

Quizás no sea tan sencillo cómo parece, pero agradecería si me podéis echar una mano sobre cómo hacerlo (si es posible solo con CSS y HTML ó si sería necesario echar mano de Javascript...).

Muchas gracias de antemano.

Un saludo.

[Zeromm]

No metas javascript para hacer eso por dios!!

Es menos dificil de lo que parece. Solo tienes que seleccionar ese elemento al hacer hover sobre un elemento superior por ejemplo. Te dejo un ejemplo cutre que hice a lo rápido en codepen

solo tienes que decirle que al hacer :hover a un elemento, el elemento hijo que quieras le aplique los estilos. Nada más

padre:hover #hijoquequieroconestilos{estilos...}

[EGTCom]

Aiba! que fácil! Muchas gracias de verdad!!!! La verdad es que era más sencillo de lo que parecía... no obstante al ponerme el código me lo has dejado clarísimo!

Por supuesto acepto cualquier crítica u opinión sobre la web (aún queda limpiar los estilos y pulir alguna cosilla) tanto con respecto al código cómo con respecto al diseño!

Un saludo y muchas gracias de nuevo.