Roll Over Image Help

[hayeske]

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!

[waylaid]

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

[hayeske]

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”)

[waylaid]

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

[hayeske]

Perfect!!! Thanks for your help waylaid!!

[waylaid]

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

[Author]

Posts