-1

I want to set permanently video icon on image, but i can't. When i do that, two image are showing: 1. video icon 2. my image, but not adjust 1 and 2 at once one image.

More Clearly: I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop.

HTML:

<div class="video">  
    <img style="height:200px" src="http://i.imgur.com/GMjqTR7.jpg"/>
    <a href="#"></a>
</div>

CSS:

.video {
    position: relative;
}
.video a {
    position: absolute;
    display: block;
    background: url(/images/play-btn.png);
    height: 100%;
    width: 100%;
    top: 75px;
    left: 150px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

Please Help Me. Thanks.
JSFiddle - Live

Masud Rana
  • 51
  • 8
  • please clarify the question. – Rabin May 21 '17 at 13:45
  • thanks for reply... I wants to share a photo with video icon. I have image without video logo. I wants to add video logo on image using code. I don't wants to set logo using photoshop. – Masud Rana May 21 '17 at 14:55

1 Answers1

0

This can be done on the client or server side. Based on the fact that your example only contains front-end code, I'll assume you want to this on the front-end.

Take a look at watermak js http://brianium.github.io/watermarkjs/

For a server-side example, see this answer Add 'Watermark' to images with php

Community
  • 1
  • 1
Solomon A.
  • 491
  • 4
  • 7