¡Hola!
Estoy creando una página con una especie de instrucciones, el caso es que usé unas imágenes GIF's y tuve la idea de que cuando el cursor pasase por encima, estas se agrandasen, y el texto a su lado cogiese un margin-top y mantuviese "medianamente" la alineación.
No soy experto ni nada, pero me gusta aprender cosas nuevas y estuve leyendo sobre los selectores y esa opción de... Poder afectar a un elemento, mediante la interacción inmediata con otro distinto.
Aquí os dejo un CodePen para que veáis lo que tengo hecho:
http://codepen.io/RubenNicolas/pen/Awmeo
Sé que puedo tener el código un poco desastroso y que quizá sobre bastante
pero es que cuando me pongo a escribir me gusta usar el Notepad++ y poner hasta el código inline así no me tengo que mover arriba y abajo. Por eso quizá no tengo experiencia estructurando el archivo.css
En cualquier caso,
mi idea, es que al pasar el cursor por la imagen, el texto coja ese margin y ese doble borde.
¡PERO! También quiero que al hacer hover sobre el texto, las imágenes se ensanchen, y viceversa.
Y he ahí mi problema, que no me funciona en viceversa
Probé esto:
Código:
.gifs:hover + .textogifs {
text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000;
margin-top:5%;
z-index:3;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.textogifs:hover + .gifs {
width:70%;
transition: width 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
He pensado que quizá el selector "adyacente" solo se refiere a los "hermanos" que le siguen a la derecha →→→
Pero probé con .textogifs:hover ~ .gifs y tampoco funciona.
Así que también he pensado que quizá ese código se sobreescriba, pero no puede ser porque en ese caso funcionaría sobre el texto ya que es el que coloqué debajo en las pruebas.
Seguramente alguien tendrá otra forma de hacer lo que yo quiero hacer, solo que no me lo he pensado mucho e intento hacerlo así y ya quiero saber si hay alguna solución.
En cualquier caso agradezco vuestra ayuda, y si me contáis otra forma de conseguir eso mismo que yo quiero hacer con CSS u de otra forma más fácil.
PD.: Lamento escribir tanto. No consigo corregir esta costumbre.