Image rollover-zoom near mouse

Question

I have an advent/christmas calendar. Everyday is another picture with one more door opened. To make these regions clickable I used CSS and IDs like this:

CSS:

ul#doorregions {
  list-style: none;
  background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
  position: relative;
  width: 950px;
  height: 575px;
  margin: 0;
  padding: 0;
}
ul#doorregionsli {
  border: 0px ;
  position: absolute;
}
#door1 {
  left: 135px;
  top: 192px;
  width: 73px;
  height: 116px;
}
#door2 {
  left: 135px;
  top: 192px;
  width: 73px;
  height: 116px;
}

HTML:

<ul id="doorregions">  
  <li id="door1">
    <span><a href="<?php echo($december1); ?>">
    <img src="blankpixel.gif" width="100%" height="100%">
  </a></span></li>
  <li id="door2">
    <span><a href="<?php echo($december2); ?>">
    <img src="blankpixel.gif" width="100%" height="100%">
  </a></span></li>
</ul>

So far all works fine. Now an image should, on rollover, show a door near the mouse cursor while it is over the region. I tried something like:

#door1 a:hover {
  display:block;
  background-image: url(OTHERPICTURE1.jpg);
}

But this method doesn't work if the other picture is bigger than the door region. Any other idea? I can't slice the background image, that is not an option.

It's not necessary to follow the mouse in the region, the position can be fixed. But this second image should only apear while the mouse is over the door (or maybe on the second picture).

The BEST solution would be something like this: http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

But in this case it is the same picuture which zooms in. I have only blank gifs. What will be the smartest idea?

Answer 1

If you are willing to use jQuery, you could create a hidden div for each "door". Then, bind a hover event to the a tag and set the visibility of the div to true. Like such:

$("li #door1 a").hover(function () {
  $("div #door1image", this).fadeIn("fast");
}, function () {
  $("div #door1image", this).fadeOut("fast");
});

The "door1image" is id of the div that would be hidden from the start (display:none). It could be placed inside the li with the a tag for each door.

Code is not tested and may not be perfect, but hopefully you get the idea.

Answer 2

What about setting the door divs to position: relative then do an absolutely positioned div with negative bottom and rightplacement example:

#door1 {
Position: relative;
}
#door1 .door {
Position: absolute;
Bottom: -25; 
Right:-25;
Display:none;
}

Then use javascript to change the display property back to normal.

Hope this helps.

Answer 3

I haven't been able to get fades or animation to work like I want it to, but here is how I would make the popup images. Note: that instead of using a blank image, the image should be the image you want to display on hovering.

CSS

ul#doorregions {
  list-style: none;
  background: url(<?php echo($pictureoftheday); ?>) no-repeat 0 0;
  position: relative;
  width: 950px;
  height: 575px;
  margin: 0;
  padding: 0;
}
ul#doorregions li {
  border: 0px ;
  position: absolute;
}
#door1 {
  left: 135px;
  top: 192px;
}
#door2 {
  left: 225px;
  top: 192px;
}
.doors {
  background: #444;
  width: 73px;
  height: 116px;
}
.popup {
 position: absolute;
 top: 0;
 left: -99999px;
 border: 0px;
 z-index: 9;
}

HTML

<ul id="doorregions">
 <li id="door1" class="doors">
  <span><a href="<?php echo($december1); ?>">
   <img class="popup" src="<?php echo($december1Image); ?>">
  </a></span>
 </li>
 <li id="door2" class="doors">
  <span><a href="<?php echo($december2); ?>">
   <img class="popup" src="<?php echo($december2Image); ?>">
  </a></span>
 </li>
</ul>

Script

// using window.load to ensure all images are loaded
$(window).load(function(){
 $('.doors').each(function(){
  var popup = $(this).find('.popup');
  // find middle of door
  var doorY = $(this).height()/2;
  var doorX = $(this).width()/2;
  // position middle of popup to middle of door
  var popY = doorY - popup.height()/2;
  var popX = doorX - popup.width()/2;
  popup
   .hide()
   .css({top: popY, left: popX });
  $(this).hover(function(){
   popup.show();
  },function(){
   popup.hide();
  })
 })
})

Answer 4

I'm not entirely sure of what you're needing, but the following code duplicates the functionality of the "Fancy Thumbnail" link you provided. Hopefully it will help!

<!DOCTYPE html>
<style>
ul {
    list-style: none;
    margin: 50px;
    padding: 0;
}

li {
    width: 300px;
    height: 300px;
    float: left;
    border: 3px outset gray;
    background: white;
}

li:hover {
    margin: -50px;
    width: 400px;
    height: 400px;
    z-index: 2;
    position: relative;
}
</style>
<ul>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
    <li>foo</li>
</ul>

Answer 5

Thank you all, i used the idea with the invisible div and JS