Grow your CSS skills. Land your dream job.

Roll Over Image Help

  • # July 3, 2013 at 3:09 pm

    I am trying to get a rollover effect on my front page of a website I’m working on and it’s not working correctly. I’m sure I’ve looked at it too long and just need to step away, but I figured I’d ask.

    What I need is the image (the iPad in this case) to darken and also the thumb to come in from the left and leave to the left on the hover. I can get it all, but for whatever reason the thumb is using the upper left of the page as it’s starting point. I want the thumb to appear from the edge of the iPad, not the page. I hope this makes sense?

    Here’s what I have in [jsFiddle](http://jsfiddle.net/4Dfpm/326/ “jsFiddle”) so far. I have the margin on the ipad set to 100 and 100 (left and top) to show that the thumb isn’t linked to the iPad like I want it to be.

    Thanks in advance!

    # July 3, 2013 at 3:44 pm

    You need to set **position: relative;** on the element that contains the hand (otherwise it will be positioned absolute to the body element). In this case the container seems to be **a.darken**.

    # July 3, 2013 at 4:36 pm

    That helped me out half way. Now, the thumb is lined up, but it’s visible when it’s not in the iPad image. Can I hide it when it’s not in the iPad image?

    [updated jsfiddle](http://jsfiddle.net/4Dfpm/327/ “updated jsfiddle”)

    # July 3, 2013 at 5:33 pm

    Add **overflow: hidden;** to **a.darken**. Should do the trick but I’m only looking in Chrome.

    # July 3, 2013 at 7:53 pm

    Perfect!!! Thanks for your help waylaid!!

    # July 4, 2013 at 3:42 am

    Actually, for this you could use **overflow-x:hidden;**

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".