画像の周りにラッパーを作成し、そのラッパー内に、ホバー時に表示/非表示にするボタンを含めることができます。次に、画像にカーソルを合わせたときにこれらのボタンを表示/非表示にします。
HTML-
<span class="image-wrapper">
<span class="image-options"></span>
<img src="..." />
</span>
CSS-
.image-wrapper {
position : relative;
display : inline-block;
}
.image-wrapper .image-options {
position : absolute;
top : 0;
right : 0;
left : 0;
height : 25px;
z-index : 2;
display : none;
}
.image-wrapper:hover .image-options {
display : block;
}
CSS3を使用して、オプション要素をフェードイン/フェードアウトすることもできます。
.image-wrapper {
position : relative;
display : inline-block;
}
.image-wrapper img {
position : relative;
}
.image-wrapper .image-options {
position : absolute;
top : 0;
right : 0;
left : 0;
height : 25px;
z-index : 2;
background : grey;
border : 1px solid black;
opacity : 0;
filter : alpha(opacity=0);
-webkit-transition : opacity 0.25s linear;
-moz-transition : opacity 0.25s linear;
-ms-transition : opacity 0.25s linear;
-o-transition : opacity 0.25s linear;
transition : opacity 0.25s linear;
}
.image-wrapper:hover .image-options {
opacity : 1;
filter : alpha(opacity=100);
}
これはCSSのみを使用したデモです:http://jsfiddle.net/fJsJb/
そしてもちろん、JSでフェードを発生させることができます:
$('.image-wrapper').on('mouseenter', function () {
$(this).children('.image-options').stop().fadeIn(250);
}).on('mouseleave', function () {
$(this).children('.image-options').stop().fadeOut(250);
});
JSを使用したデモは次のとおりです。http://jsfiddle.net/fJsJb/1/
アップデート
top
次のようにプロパティをアニメーション化して、スライドアニメーションを作成することもできます。
.image-wrapper {
position : relative;
display : inline-block;
overflow : hidden;
}
.image-wrapper img {
position : relative;
}
.image-wrapper .image-options {
position : absolute;
top : -25px;
right : 0;
left : 0;
height : 25px;
z-index : 2;
background : grey;
border : 1px solid black;
-webkit-transition : top 0.25s linear;
-moz-transition : top 0.25s linear;
-ms-transition : top 0.25s linear;
-o-transition : top 0.25s linear;
transition : top 0.25s linear;
}
.image-wrapper:hover .image-options {
top : 0;
}
これがデモです:http://jsfiddle.net/fJsJb/2/