Question

I have 2 links for the same image. One is a thumbnail which is being displayed on the screen. The second link is the full size image of the thumbnail.

How can I code this so that when the mouse hovers over the image the screen turns black and just the full screen image is shown?

<div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>
<div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg"><img scr="/thumbnail2.jpg"> </a></div>

On mouse hover

1. Make screen black
2. Load Fullsizeimage.jpg in the centre of the screen

Answer 1

Well what you could possibly do is place a div element above all other elements (use 100% width and height, position:absolute and z-index). Make it hidden by default. Then when you are ready to display an image, make that div visible and load the full size image into it. You can make the screen black simply by giving that div some css properties – background-color:black.

You’ll want to modify your HTML to have the small image contain a reference to the large image. Something like this –

<div id= "smallImage" class="thumbnail"><a href="/fullsizeimage.jpg"><img scr="/thumbnail.jpg"> </a></div>

For the actual loading of the image, you’d want to do something like this –

$("#smallImage").on('mouseover',function(){
  var smallImage = $(this);
  var largeReference = smallImage.attr('rel');
  $("#largeImage").attr('src',largeReference);
});

Then the HMTL for the large image would be –

<img id="largeImage" src="" />

Don’t forget to allow the user to close this large image view.