On mouse hover show full size image

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

Solution 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.

Solution 2

Use the Below CSS to display black div on hover property of an image

`#1 Img:hover +div  {
position:fixed;
top:0px;
left:0px;
width:"set the width";
height :"set the height";
}`

Solution 3

function fullscreen1() {
img = document.getElementById('img1')
img.src = "/fullsizeimage.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
 function fullscreen2() {
img = document.getElementById('img2')
img.src = "/fullsizeimage2.jpg"
img.style = "position:fixed;top:30px;left:30px;width:990px;box-shadow:6px 7px 5px;background-color:rgb(70,70,70);"}
    <div id= "1" class="thumbnail"><a href="/fullsizeimage.jpg" onmouseover="fullscreen1()"><img id="img1" scr="/thumbnail.jpg"> </a></div>
    <div id= "2" class="thumbnail"><a href="/fullsizeimage2.jpg" onmouseover="fullscreen2()"><img id="img2" scr="/thumbnail2.jpg"> </a></div>

dont forget to put the close link as suggested in one of the answers

Comments

[Yahoo]

How could I " load the full size image into it" Is there a way to load the image only when I put my mouse hover on it ?