Loading An Image Onto Another Using Hover (Javascript)

Question

So as you can tell by the title, I'm trying to load an image above/onto another. It's kind of hard to use with this very amateur setup I have. Basically what I'm trying to do is load an image into the same position as the one that's being hovered. Hard to explain, but I think you might understand.

The code is here: Pastebin.com

What it currently does is create a map of sorts using images. Once hovered over, they dim out and display the realname of the image. What it doesn't do yet is load a new image above the currently hovered-over image if that makes sense. Hopefully someone can help. You can view its current status here: Sinnoh.php

(Scroll right to find some images)

Answer 1

You can have the effect you want by placing the images on top of another, and adjusting their opacity values on hover. A simple transition will give it the fade in/out look you want.

 img { height: 600px; width: 200px; } .alt-img { opacity: 0; } .image-container:hover > .main-img { opacity: 0; } .image-container:hover > .alt-img { opacity: 1; } img { transition: 1s; position: absolute; } 

 <div class="image-container"> <img class="main-img" src="http://gogojjtech.com/misc/map/route204.png" /> <img class="alt-img" src="http://gogojjtech.com/misc/map/route205.png" /> </div>