web-dev-qa-db-ja.com

ホバーでリンク画像を5ピクセル上に移動

CSSとHTMLを使用して、このサイトのポートフォリオページ Solid Giant と同様の効果を達成するにはどうすればよいですか？

私はこのようなものを置くだけでうまくいくと思っていました：

a img{
    margin-top: 5px;
}

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

しかし、imgの代わりに：hoverをリンクに配置しても機能しませんでした。私は彼のコードとcssを精査しましたが、私はこれを理解することができませんでした。助けてください ：）

csshoveronhover
16
Amanda

position: relativeは機能します：

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

ご了承ください position: relativeは、要素がnot移動されたかのように、ドキュメントフロー内のスペースを予約します。しかし、この場合、それは問題ではないと思います。

38
Pekka

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

同様の動作例を参照してください：
http://jsfiddle.net/rimian/7aPvS/1/

16
Rimian

CSS/HTML5アニメーションを使用することもできます： http://slides.html5rocks.com/#css-animation

また、position：relativeセットを持つ別のparentdivでラップすることもできます。

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

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