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
djsoltanAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

KTMCCommented:
It's got a <span> tag wrapped around it with a class of play-button-hover which is called in an external javascript file which inserts an image into the span when the mouse is passed over it. Unfortunately while I can tell you what did it, I'm not a javascript expert.

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.




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
a.linkSwapper {
	height: 150px;
	width: 150px;
	border: 4px solid #82BF4B;
	display: block;
	background-image: url(hulu%20link/hulu.png);
        background-repeat: no-repeat;
	background-position: center center;
}
a.linkSwapper:hover {
	background-image: url(hulu%20link/huluOverstate.png);
	border: 4px solid #AACF46;
}
-->
</style>
</head>
 
<body>
 
<a href="http://www.hulu.com/" class="linkSwapper"></a>
 
</body>
</html>

Open in new window

0
KTMCCommented:
Forgot to mention you can see it in action here:

http://www.kmcdigitaldesign.com/huluExample.html
0
brundoCommented:
If we put an image inside the a.linkSwapper, doesn't it come over the "play" button?

My solution is brute-force pure CSS solution, made out of original. www.zulu.com:

<html>
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Video + play button</title>
	
	<style type="text/css">
	.thumbnail{
		border:none;
		padding:0;
		width:145px;
		height:80px;
	}
	.play{ 
	}
	.play-button{
		position:absolute;
		width:33px;
		height:32px;
		top:27px;
		left:57px;
		z-index:10;
		visibility: hidden;
	}
	a.play:hover .play-button {
		visibility: visible;
	}
</style>
</head>
 
<body>
	
  <div class="home-play-container">
		<a href="http://www.hulu.com/watch/41271/house-lucky-thirteen" class="play">
    		
			<img src="http://www.hulu.com/images/btn-play-big.png" border="0" 
    			class="play-button">
    	   
			<img alt="House: Lucky Thirteen (season 5, episode 5)" 
    			src="47820_145x80_generated__7uIdCNrehUy+qitQiZIujg.jpg" 
    			title="House: Lucky Thirteen (season 5, episode 5)"
    			class="thumbnail">
    	</a>
    </div>
       
</body>
 
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

djsoltanAuthor Commented:
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
0
KTMCCommented:
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.
0
brundoCommented:
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.
0
KTMCCommented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.