¿Cómo podría lograr un efecto similar al de la página de cartera de este sitio Solid Giant, con CSS y HTML?Mover la imagen del enlace 5px al pasar el mouse
había pensado que sólo poner algo como esto funcionaría:
a img{
margin-top: 5px;
}
a img:hover{
margin-top: 0px;
}
Pero no funcionó, incluso si pongo el: flotar en el enlace en lugar de la img. Revisé su código y CSS, pero no pude entenderlo. Ayuda por favor :)
position: relative funcionaría:
a img:hover{ position: relative;
top: -5px;}
nota que position: relative se reserva el espacio en el flujo de documentos como si fuera el elemento no se movió. Pero creo que en este caso, eso no es un problema.
También es posible usar animaciones CSS/HTML5: http://slides.html5rocks.com/#css-animation
también se puede envolver en otra parentdiv que tiene posición: Conjunto relativa:
<div class="parent">
<img class="image" />
</div>
.parent {
position:relative;
}
.image {
position:absolute;
top:0px;
left:0px;
}
.image:hover {
top:-15px;
}
dar la imagen de un id:
<img id="imgHover" src="" />
#imgHover:hover { margin-top: -5px; }
Asegúrese de tener esto en su html para que IE sepa cómo funcionar correctamente
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ver también translate():
http://www.w3schools.com/css/css3_2dtransforms.asp
img:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px)
}
Véase un ejemplo de trabajo similar:
http://jsfiddle.net/rimian/7aPvS/1/
+1 para la información sobre la posición de ': relative'. No lo sabía – Wex
agregar relleno de fondo: 5px para deshacerse de 'parpadeo' –
¡Gracias! Exactamente lo que necesitaba. –