The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Image Zoom

  • # March 23, 2012 at 3:39 pm

    Hi there,

    I was hoping someone here could help with this problem im having. I’ve managed to set up an image for when the user rolls over it, it zooms out. I would like to add the same functionality to a button, so when the user rolls over that button the image zooms out, but i can’t seem to get the darn thing to work.

    I’ve set up a fiddle to help explain what i mean.

    Any help would be greatly appreciated,

    Many Thanks,


    # March 24, 2012 at 6:26 am

    well,just change the

    $(‘#right img’).hover to $(‘.btn-torq’)

    $this=$(this) to $this=$(‘#right img’)

    Bytheway, great idea, amazing effect.

    # March 24, 2012 at 6:57 am

    This reply has been reported for inappropriate content.

    You should think about using percentages for your height instead of px just to make it a little more flexible…Incredible little effect!

    # March 24, 2012 at 10:47 am

    @jozsef Thank you so much for your help i really appreciate that. It works a treat, I’m a complete novice when it comes to javascript. Thanks for the compliment. :)

    @kgscott284 Thanks for the advice and your comment. What advantages are there with using % over px? I’m not sure what you mean by flexible?

    # March 24, 2012 at 11:15 am

    Does this help you out: or maybe this: or even more flexible:

    # March 26, 2012 at 2:38 pm

    Yes, many thanks @vermaas. I think i now have a clearer idea of what flexibility means in javascript.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed