I have a question regarding an image that was dynamically changed using JavaScript. The issue I'm facing is that the new image appears to be placed on top of a background image, resulting in a clear square outline around it. I'd like to know if there's a way to fade the edges of the image and blend it seamlessly with the background without using jQuery, preferably achieving this effect through vanilla JavaScript.
You can view the webpage where this problem occurs here: https://i.sstatic.net/uegzr.jpg
Below is the JavaScript code snippet I've been working on:
// 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";