Solved

CSS Question

Posted on 2008-10-30
7
240 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
  • 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 500 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 54
Angular 2 - Issue in page Layout 2 48
Syntax Error 2 46
Change javascript css 1 20
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

920 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now