4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

WordPress | How to make a thumb nail image slightly enlarge/wiggle/ when the mouse hovers over it

by Ducksauce
3 replies
  • WEB DESIGN
    • |
Title kind of says it all, I just want the images to get the attention, saying click on me and I will pop out bigger and better.

Would be nice to have a little border around them too.

Any hints or links with hints how I can do this?

Ducksauce.
#enlarge or wiggle or #hovers #image #make #mouse #nail #slightly #thumb #wordpress
  • Profile picture of the author xythis
    It wouldn't be very surprising if the theme you're using already calls jQuery, which is a start in the right direction. If you're using jQuery on your site, all you need to do is additionally include the jQuery UI js, and then you can customize and combine the effects 'bounce' and 'scale'. Yes, you can specify the bounce direction to sideways instead of up and down.

    Bounce Documentation: docs.jquery.com/UI/Effects/Bounce
    Scale Documentation: docs.jquery.com/UI/Effects/Scale
    To download the js for jQuery UI: jqueryui.com/
    {{ DiscussionBoard.errors[5995395].message }}
  • Profile picture of the author Ducksauce
    Thanks for the great start, I will follow your links and try to work it out.

    Cheers.
    Signature

    I love life an everything in it. Don't worry, be happy.

    {{ DiscussionBoard.errors[5997333].message }}
  • Profile picture of the author Big Squid
    You can use CSS. It won't make the wiggle, but you can make them enlarge slightly.

    Use what's called a sprite. You can Google it, but it basically looks like this:


    Basically, when the browser is loaded it loads the entire picture. But the CSS properties are set to reveal space enough for one image, in this case the button with the "normal" text. The rest is hidden.

    When moused over, the CSS changes the position properties to reveal the "hovered" button.

    You can do the same thing by creating a sprite. One with the image at say 110x110, and then the other image with 130x130. The exact specifications will be up to you and whatever works.
    {{ DiscussionBoard.errors[5998667].message }}

Trending Topics