Placing a Play Icon over the image using CSS

Google+ Pinterest LinkedIn Tumblr +

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

1
2
3
4
5

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.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_image1.jpg
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.
play_icon1.gif
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’
float_left.gif
Below would be the respective output of the same:

output.jpg

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

Related articles which you would like to read:
1. Snippet Code for Simple Ajax Tabs with cool CSS Styles
2.

Share.

About Author

Leave A Reply