Image within a div - faded edges

Question

I have an image that was changed through Javascript and that image is placed on top of a background image, however when I look at it on the site you can see a clear square where the image was placed. I wanted to know if there is a way to fade the images edges and have the background come in, making it look one. Sidenote. I also wish to avoid JQuery at this time, If possible I would like to achieve this through javascript.

Here you can see the site page: https://i.stack.imgur.com/uegzr.jpg

Javascript code:

// attempting to move the images only
var y = document.getElementById("pic2");
// Sorted by pathing the image to the folder ( can use .. to get in the folder)
y.setAttribute("src", "../images/water_image1.png");
y.style.cssFloat = 'right';
// change the images to the same size as the replacing pic
y.style.width = "400px";
y.style.height = "250px";
// This is sorting out the alignment with the text
y.style.margin = "110px 20px 10px";
y.style.opacity = "0.8";

Answer 1

You could loop through each pixel of image and set the value of its alpha channel depending on distance to closest border of image, then render the result on <canvas>. For easier but less generic approaches, take a look at this.