web-dev-qa-db-fra.com

Déplacer l'image du lien de 5 pixels vers le haut en survol

Comment pourrais-je obtenir un effet similaire à celui de la page du portfolio de ce site Solid Giant , avec CSS et HTML?

J'avais pensé que simplement mettre quelque chose comme ça fonctionnerait:

a img{
    margin-top: 5px;
}

a img:hover{
    margin-top: 0px;
}

Mais cela n'a pas fonctionné, même si je mets le: hover sur le lien au lieu de l'img. J'ai parcouru son code et css mais je ne pouvais pas pour la vie de moi comprendre cela. Aidez-moi, s'il vous plaît :)

csshoveronhover
16
Amanda

position: relative travaillerait:

a img:hover{ position: relative; 
             top: -5px;}

notez que position: relative réserve l'espace dans le flux de documents comme si l'élément pas déplacé. Mais je pense que dans ce cas, ce n'est pas un problème.

38
Pekka

Voir aussi 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)
}

Voir un exemple de travail similaire:
http://jsfiddle.net/rimian/7aPvS/1/

16
Rimian

Vous pouvez également utiliser des animations CSS/HTML5: http://slides.html5rocks.com/#css-animation

vous pouvez également l'envelopper dans une autre division parent qui a la position: relative set:

<div class="parent">
  <img class="image" />
</div>

.parent { 
    position:relative; 
}
.image { 
    position:absolute; 
    top:0px; 
    left:0px; 
}
.image:hover { 
    top:-15px; 
}
0
Senica Gonzalez