Question

73

How to add a play icon to Image on CSS

rated 0 times [ 77] [ 4] / answers: 1 / hits: 18254 / 9 Years ago, thu, june 25, 2015, 12:00:00

I'm looking for how to add a play icon to Image on CSS.

I tried this code, but it doesn't appear right I want it to appear on the center :

    .video { position: relative; }



.video a {

   position: absolute;

   display: block;

   background: url(http://www.slatecube.com/images/play-btn.png);

   height: 100%;

   width: 100%;

   top: 20px;

   left: 20px;

}

html :

<div class=video >  

<img  style=height:200pxsrc=http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg  />

    <a href=#></a>

</div>

here is the jsFiddle :

DEMO

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josefn

Add To Favorites

Follow

Total Points: 251

Total Questions: 93

Total Answers: 84

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

josefn questions

1 Vue 3: How to update component props value correctly using composition api?

Thu, Nov 11, 21, 00:00, 3 Years ago

1 Does Array.find method return a copy or a reference of the matched element form given array?

Sun, Jun 21, 20, 00:00, 4 Years ago

1 How to get the modulus and exponent of an RSA public key in Node.js

Wed, Apr 29, 20, 00:00, 4 Years ago

1 How to use setTimeout with a Loader

Sat, Mar 28, 20, 00:00, 4 Years ago

1 How do I implement Socket.IO in an electron app?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 9 Years ago carlymykalac · Accepted Answer

DEMO

you should set background-size

.video a {

  position: absolute;

  display: block;

  background: url(http://www.slatecube.com/images/play-btn.png);

  height: 100%;

  width: 100%;

  top: 75px;

  left: 150px;

  background-size: 50px 50px;

  background-repeat: no-repeat;

}