How do I achieve a hover over image effect?


Tags: javascript,jquery,css,image,css3

Problem :

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...



Solution :

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/


    CSS Howto..

    How to wrap entire line with overline and underline , until the end of the line ?

    • centered, not moving down.. unsure why / how to fix

    How to display CSS files in Django blog?

    Entire window becomes blur after a modal is shown jQuery why?

    How to select a div with nth-child()?

    How can I alter this CSS so that it only applies to a certain div?

    How to use commas in a CSS variable fallback?

    How do I change this flipping card to rotate itself onclick?

    how to make div fixed at a particular scroll level

    How do I pre-hide something in preparation to expose it in a jQuery animation?

    How Do I set this PHP printed HTML form to stay within

    tags?

    how to use CSS positioning in 100% width layout

    how to place an image at the center of the browser irrespective of the resolution?

    Show Loading gif on hover

    How do I hide the div if the Var is empty?

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to detect whether a browser has tap highlighting?

    How do I tell what are the ids and classes of a rail html.erb component?

    How to position a background image in reveal.js?

    How to style a “list item > link” in jquery mobile

    how to print no blur content over a blurred div

    How to generate CSS markup for non-designers

    How to place buttons next to each other using css Bootstrap

    On Eclipse-Java EE, how do I change the color settings for selected elements on a tree view?

    How to show a background color over the full width when zooming in?

    How to reorder DOM elements with CSS only?

    How to set a style one a parent element [duplicate]

    How would I create global scripts within HTML Pages so I don't need to constantly change the location?

    How to prevent randomly positioned images from overlapping using Angular

    Responsive menu show and hide on click