Move one image inside other image

  • A+
Category:Languages

Background

I am allowing user to upload an image inside mask image....

Once user upload image, I am filling user uploaded image inside mask image :

1.Mask image :

Move one image inside other image

2.user uploaded image :

Move one image inside other image

3.User uploaded image on mask [Final image ] :

Move one image inside other image

Codepen : https://codepen.io/kidsdial2/pen/OdyemQ

JSfiddle : http://jsfiddle.net/2xq8p0zy/

Html

<body>   <img src="http://139.59.24.243/images/invitations/birthday/a.jpg" alt="Move one image inside other image" alt=""> </body> 

css

body {   background-color: #111;   color: #555;   font-size: 1.1em;   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }  img {   margin: 20px auto;   display: block;   width: 100%;   height: 500px;   -webkit-mask-image: url(http://139.59.24.243/images/invitations/birthday/ice.png);   mask-image: url(http://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-image/mask-image.png);   -webkit-mask-position: center center;   mask-position: center center;   -webkit-mask-repeat: no-repeat;   mask-repeat: no-repeat; } 

Requirement:

I want to give an option to move the user uploaded image inside mask image as in this fiddle :

http://jsfiddle.net/aLcb4sb5/ or link

Issue :

but currenly in website both images are moving....

 


So i made a few changes to your design. its a small change to the html and css. The new html layout is like this

  <div class="image-holder">   <img src="https://www.gettyimages.com/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg" alt="Move one image inside other image" alt="">   </div> 

Where image-holder div is the mask image and the image inside it, is the user uploaded image

I made a demo have a look here

Note for draggable to work you need jquary.ui installed, and i think that you already using it in your site.

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: