Home/ Questions/Q 6906799
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:21:21+00:00

How is it possiable to create a nice hover effect when mouse over a

  • 0

How is it possiable to create a nice hover effect when mouse over a image. It should fade in and get some shadow and move a bit down.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The CSS:

    .hoverImg {
    opacity: 0.5;
    margin-top: 0px;
    box-shadow: 0px 0px 0px #000;
}

    And the JavaScript:

    $('.hoverImg').each(function()
{
    $(this).mouseover(function()
    {
        $(this).animate({'opacity': 1, 'margin-top': '5px', 'box-shadow': '2px 2px 2px #000'}, {duration: 500});
    });
    $(this).mouseout(function()
    {
        $(this).animate({'opacity': 0.5, 'margin-top': '0px', 'box-shadow': '0px 0px 0px #000'}, {duration: 500});
    });
});

    Caveat: box-shadow may not be animatable with jQuery alone. Check out jQuery UI for a possible solution. Also, you’ll (of course) want to add browser-specific prefixes for box-shadow, as it’s not universally supported as a CSS standard property yet.

    • 0