Placing a Play Icon over the image using CSS

On 10.26.08, In CSS, HTML, by admin

Tags: CSS, HTML

I am back again with some good snippet on “Placing a Play Icon over the image using CSS”, After going through this article you guys can learn easily on how we can place a Play Icon (nothing but a .gif icon or .png icon) over an image. In some scenarios you might have come across on placing the respective play icon over the respective video image.

For example: If you guys look at my site that is ‘developersnippets.com‘ , towards your right you can see some video links in section called “Videos Were You Can Learn“, in this section and as well as in complete article page you can view some video links which are pointing to “TechVideoBytes“, if you look those images you can view a “play icon” on those respective images right? Simply I have placed a “.gif” image over the video image using CSS. Check out how I have placed this using CSS.

DEMO & DOWNLOAD
Before going to have a glance on the HTML and CSS code, you can just have a look at the output and if you want to download the same, then you do the same.
Click here for live demo | Click here to download the code

HTML
Below is the HTML code, where you can copy and paste it in a tag

<div class="container-border">
<div class="video-dev">
<a title="Click Here To Play Video" class="video-a-link" href="/techvideobytes/assets/video/techvideo.flv"><span class="video-link-span"></span></a>
</div>
</div>

CSS
Below is the CSS code, to place the respective play icon over an image, just copy the below CSS code and paste the same in your respective style sheet.

.video-dev {
	cursor:pointer;
	position:relative;
	background:url(rockingvideo.jpg) no-repeat center;
	width: 111px;
	height: 157px;
	left: 0px;
	top: 0px;
}
 
.video-a-link {
	position:relative;
}
 
a {
	color:#0E58A0;
	width: 111px; height: 157px;
	left: 0px; top: 0px;
	display:block;
}
 
.video-dev .video-link-span {
	background:transparent url(play_icon.gif) no-repeat scroll 0pt 50%;
	cursor:pointer;
	color:#000000;
	display:block;
	height:35px;
	position:absolute;
	text-align:center;
	text-decoration:none;
	vertical-align:bottom;
	width:34px;
	opacity: 0.8;
	left: 38px;
	top: 68px;
}
 
.container-border {
	border:1px #CCCCCC solid;
	padding:3px;
	width: 111px; height: 157px;
	margin-top:5px;
	margin-right: 1px;
	float:left;
}

Customize the Code:
1. Change the file name and path which I am using and insert your path and filename accordingly as required.

Video Image
2. Below is the filename for the ‘play icon’, so change it as per your requirement, here you can place ‘.gif’ or ‘.png’ file as per your requirement.

3. Want to place show this side by side then use ‘float:left’ or else if you want to place one after the other then remove ‘float:left’

Below would be the respective output of the same:

(Above is the screen grab of the output in Firefox 3)

Related Entries...

Adding a div, button to the body tag dynamically using JavaScript DOM
Here is a simple snippet on adding a "div" to the body tag dynamically using JavaScript, after going ...
Netscape is the 'navigator.appName' for Google Chrome
Just think what Google Chrome would return when we run browser detection code written in JavaScript ? ...
Error: Invalid source HTML for this operation
Hi developers, today I encountered one error which works fine in Mozilla Firefox but giving an error ...
How To: Make Simple slideToggle app using jQuery
Introduction: After going through this article, you can be able to develop a simple slide panel appl ...
Free JavaScript database for your browser, Taffy DB
Taffy DB, which is well known JavaScript database for your browser, and which is a free and opensourc ...
Slide In and Slide Out Status Message Box using jQuery
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...
Code Snippet of handling files in Ruby Programming Language
In the following article we can have a look at the ways of creating new files in Ruby programming lan ...
Floating SlideIn Menu with Anchor Link using jQuery
Introduction: This article will help you in developing simple Floating Slide-In Menu using jQuery. T ...
Smooth Slide Show s3Slider jQuery plugin
This is an awesome jQuery plugin like Jondesign's Smooth Slideshow v2.1, by looking at the jd's Smoot ...
IE Issue: Background-image running out for input textbox
Many of us might have faced this issue especially in IE browsers, issue goes like this! when we apply ...

By Blogsdna

admin

Visit Authors Website | All Articles From This Author

You Might Like:

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

3 Responses

Adding a div, button to the body tag dynamically using JavaScript DOM | developersnippets.com

10.26.08

[...] articles which you would like to read: 1. Placing a Play Icon over the image using CSS 2. Snippet Code for Simple Ajax Tabs with cool CSS Styles 3. Simple steps to develop AJAX Website [...]