thumbnail popup not working with fade in/out effect

[kuul13]

Hi

I am trying to build a travel page for my personal website.. I am very new to javascript/css so I got a template from the web and trying to work on it. But struck in middle of it. The travel page has the following functionality:
1. page contains thumbnail photos [functional]
2. on hover, the thumbnail photos fade in/out [functional]
3. also, on hover I want to show the image in a popup/frame (i don't know what you call it)

I have code to demo the issue.. There are three files in the attachment
- travelogy1.html shows thumbnail and fade in/out effect
- travelogy2.html shows thumbnail with popup (span)
- travelogy3.html shows both effects fade in/out and popup (THIS IS NOT WORKING).

The following code helps in displaying the popup/span when user hover over the thumbnail:

<a class="thumbnail" href="#thumb">
   <img style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/dc.gif" alt="DC" title="DC">
   <span><img src="js/travelogy/dc.gif" /><br />Simply beautiful.</span>
</a>

...but when it is embedded into existing "li" tag, it doesn't work. I have added two images. First one doesn't show the image. The second shows image if i change the href to refer to the image path.

<ul class="gallery_demo_unstyled gallery_demo galleria1">    
  <li class="">
     <a class="thumbnail" href="#thumb">
     <img rel="img/lasvegas.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/lasvegas.gif" alt="Vegas" title="Vegas">
     <span><img src="js/travelogy/lasvegas.gif" /><br />Simply beautiful.</span>
     </a>
  </li>
  <li class="">
     <a class="thumbnail" href="js/travelogy/wildwoods.gif">
     <img rel="img/wildwoods.gif" class="thumb selected" style="width: 91px; height: 80px; margin-left: 0px; opacity: 0.3;" src="js/travelogy/wildwoods.gif" alt="Wildwoods" title="Wildwoods">
     <span><img src="js/travelogy/wildwoods.gif" /><br />Simply beautiful.</span>
     </a>
  </li>			
</ul>

I have noticed something wierd today that, when I open travelogy3.html the IE shows that popup is blocked and whitout changing anything if i hover images the popup works but when i accept "allow popups" nothing works. Screen shots attached.

I am not sure what changes I have to make in css to make travelogy3.html work. Appreciate if someone can help!!