Sorry about the confusion. Though I'm also experimenting with different things on the website and unable to share the actual link, here's sort of what I have so far:
In Laytheme - Custom CSS & HTML, I have set up the css as following:
background: url('image A.jpg');
background: url('image B.jpg');
Now, I've inserted a following code, using the "page" editor section -> HTML Code, in between images that are displayed on my current page, as in the following:
And it shows the hovering images perfectly! The only problem is... My whole page is now responsive to the window size, meaning the size of image changes according to your window size. Yet, since I've dedicated the pixel width to <div> code, that's the only image that doesn't change its size and goes out of whack in proportion when I change the window size.
However, I realized that <div> doesn't really show up unless I dedicate the pixel width and height. So my question is, is it possible to make my <div> hovering image also respond to the changes in window size?