Effortlessly Overlay Images and Add Zoom Pan Effect in Real-Time

Effortlessly Overlay Two Images: Background and Foreground with Transparent Background

In this article, we will discuss how to overlay two images on top of each other, add a zoom pan effect in real-time, and get the zoomed part of the work image. We will use HTML, CSS, and JavaScript.

Setting Up the HTML Structure

First, let's set up the HTML structure. We will have three images: background, foreground, and work. The background image will be set as the background of the body, and the foreground image will be placed inside a container with an id of "container". We will also add a div with an id of "zoom-container" inside the container to hold the work image.

Styling the Images

Next, we will add some basic styling to the images using CSS. We will position the background image as a fixed background and set the z-index to -1. We will position the foreground image relatively and set its z-index to 1. We will also create a zoom container and set its position, size, and border.

body {
 margin: 0;
 padding: 0;
}

#background-image {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: -1;
}

#foreground-image {
 position: relative;
 width: 300px;
 height: 300px;
 z-index: 1;
}

#zoom-container {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 600px;
 height: 600px;
 border: 1px solid #ccc;
}

Adding the Work Image and Zoom Effect

Now, we will add the work image to the zoom container and create the zoom effect using the Magnific Popup library. We will set the type of magnification to "image" and enable the gallery feature. We will also create a mousedown event on the zoom container to open the Magnific Popup with the work image and set the position, size, and hide the close, prev, and next buttons.

$(document).ready(function() {
 $('#foreground-image').magnificPopup({
 type: 'image',
 gallery: {
 enabled: true
 }
 });

 $('#zoom-container').mousedown(function(event) {
 var offset = $(this).offset();
 var x = event.pageX - offset.left;
 var y = event.pageY - offset.top;

 $('.mfp-bg').css({
 'left': x + 'px',
 'top': y + 'px'
 });

 $('.mfp-content').css({
 'left': x + 'px',
 'top': y + 'px'
 });

 $('.mfp-figure').css({
 'width': '600px',
 'height': '600px'
 });

 $('.mfp-close').hide();
 $('.mfp-prev, .mfp-next').hide();

 $('#zoom-image').magnificPopup().open();
 });
});

In this article, we learned how to overlay two images on top of each other, add a zoom pan effect in real-time, and get the zoomed part of the work image using HTML, CSS, and JavaScript. We used the Magnific Popup library to create the zoom effect and set the position, size, and hide the close, prev, and next buttons.

• Magnific Popup