?
Solved

CSS Question

Posted on 2008-10-30
7
Medium Priority
?
245 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:djsoltan
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 2

Expert Comment

by:KTMC
ID: 22848289
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
 
LVL 2

Expert Comment

by:KTMC
ID: 22848299
Forgot to mention you can see it in action here:

http://www.kmcdigitaldesign.com/huluExample.html
0
 
LVL 13

Accepted Solution

by:
brundo earned 2000 total points
ID: 22848322
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
Tutorial: Introduction to Managing a Linux Server

In this tutorial on systemd, we will explore:
-OS/Distro Adoption
-chkconfig and Other Legacy Commands
-Summary and Key Commands

 

Author Closing Comment

by:djsoltan
ID: 31511957
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
 
LVL 2

Expert Comment

by:KTMC
ID: 22848706
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
 
LVL 13

Expert Comment

by:brundo
ID: 22851181
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
 
LVL 2

Expert Comment

by:KTMC
ID: 22855954
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

Featured Post

Percona Live Europe 2017 | Sep 25 - 27, 2017

The Percona Live Open Source Database Conference Europe 2017 is the premier event for the diverse and active European open source database community, as well as businesses that develop and use open source database software.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question