title: How to add a play icon to Image on CSS
body: <p>I'm looking for how to add a play icon to Image on CSS.</p>
  
  <p>I tried this code, but it doesn't appear right I want it to appear on the center :</p>
  
  <pre><code>    .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;
  }
  </code></pre>
  
  <p>html : </p>
  
  <pre><code>&lt;div class="video" &gt;  
  &lt;img  style="height:200px"src="http://san.capitalafrique.com/imatin.net/articles/images/lionel-messi.jpg"  /&gt;
      &lt;a href="#"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is the jsFiddle :</p>
  
  <p><a href="http://jsfiddle.net/z5y8ht4y/" rel="nofollow">DEMO</a></p>