djsoltan
asked on
CSS Question
hi guys,
can someone help me with the code to do a mouse over effect like the ones in hulu.com?
http://www.hulu.com
if you move your mouse over the image of a video, you see a play button over it... how can this be achieved?
Thanks
can someone help me with the code to do a mouse over effect like the ones in hulu.com?
http://www.hulu.com
if you move your mouse over the image of a video, you see a play button over it... how can this be achieved?
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you guys guys very much, that workded...
first code was not what i wanted as i had to manually create the rollover image.
thanks
first code was not what i wanted as i had to manually create the rollover image.
thanks
Why would you want to put an image in .linkswapper? It's already displaying an outstate (starting image) and overstate (play button) on the mouseover and since it's a block level element it functions perfectly as a link already.
Because I like to separate content from layout, and in case of hulu image is content (screenshot from video).
The second reason is that I suppose, djsoltan wants more pictures with the same effect - and this can be not true.
KTMC, I must say, I like your solution, and I wrote that my looks like "brute-force" compared to yours. But I would choose your approach in some other situation.
The second reason is that I suppose, djsoltan wants more pictures with the same effect - and this can be not true.
KTMC, I must say, I like your solution, and I wrote that my looks like "brute-force" compared to yours. But I would choose your approach in some other situation.
Ah, fair point, I like this method mainly because it uses very little inline code and doesn't need to be nested in a containing element, but you're right, it would be cumbersome fro a large number of images, it's a good choice for navigation, but not for say, a photo gallery.
There is a way to to this sort of thing in pure css though (see code snippet) the a.linkswapper:hover pseudo-class selector is called into play on a mouseover (hover), we define the original <a> tag as a block level item with a width & height (which allows our link to function without any foreground) and use the pseudo's attributes to swap the background image and border color.
Open in new window