如何实现将鼠标悬停在图像效果上？

Question

I'm trying to achieve the same mouse over image effect seen on wookmark and I'm assuming this is done with some jquery and css magic. Are there any good tutorials that show how this is done?

Looking through the jquery docs it seems I would need to use hover like so:

$("li.preview").hover(function(e){  
    // show and hide come css magic
});

Not sure where to go with the CSS portion of it...

Answer 1

You can create a wrapper around your image(s) and inside that wrapper you can have the buttons you want to appear/disappear on hover. Then just show/hide those buttons when the image is hovered.

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

You can also use CSS3 to fade-in/out the options element:

.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);
}​

Here is a demo using only CSS: http://jsfiddle.net/fJsJb/

And of-course you can make the fade happen with JS:

$('.image-wrapper').on('mouseenter', function () {
    $(this).children('.image-options').stop().fadeIn(250);
}).on('mouseleave', function () {
    $(this).children('.image-options').stop().fadeOut(250);
});

Here is a demo using JS: http://jsfiddle.net/fJsJb/1/

UPDATE

You can also create a slide animation by animating the top property like this:

.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;
}​

Here is a demo: http://jsfiddle.net/fJsJb/2/

Answer 2

You can do with css like this.

<style>
.imageBox { float:left; width:100px; height:100px; position:relative; background:#000; overflow:hidden; }
.imageBox .imageActions { position:absolute; top:0; left:0; width:100%; height:40px; background:#999; display:none; }
.imageBox img { width:100%; }
.imageBox:hover .imageActions { display:block; }
</style>

<div class="imageBox">
    <div class="imageActions "></div>
    <img src=".." />
</div>

Demo