View Single Post
Old 02-08-2010, 02:18 PM  
grumpy
Too lazy to set a custom title
 
grumpy's Avatar
 
Join Date: Jan 2002
Location: Holland
Posts: 9,870
replace the table with this :

Code:
       <table>
       <tr>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/01.jpg" width="100" height="75" border="0" /><span><img src="collage/images/01.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/02.jpg" width="100" height="75" border="0" /><span><img src="collage/images/02.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/11.jpg" width="100" height="75" border="0" /><span><img src="collage/images/11.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/12.jpg" width="100" height="75" border="0" /><span><img src="collage/images/12.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/06.jpg" width="100" height="75" border="0" /><span><img src="collage/images/06.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/08.jpg" width="100" height="75" border="0" /><span><img src="collage/images/08.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/09.jpg" width="100" height="75" border="0" /><span><img src="collage/images/09.jpg" /></span></a></div></td>
         <td><div class="gallerycontainer"><a class="pb" href="#nogo" ><img src="collage/thumbnails/13.jpg" width="100" height="75" border="0" /><span><img src="collage/images/13.jpg" /></span></a></div></td>
       </tr>
       </table>
and put this in your css :

Code:
.gallerycontainer{ position: relative;}
.pb img         {border: 1px solid red;}
.pb:hover       {background-color: transparant;}
.pb:hover img   {border: 1px solid blue;}
.pb span        {position:absolute; background-color:lightyellow; padding:0px; left:-500px; border:3px solid #ffaa3c; visibility:hidden; color:black; text-decoration:none;}
.pb span img    {border-width: 0; padding: 2px; }
.pb:hover span  {visibility: visible; top: 50px; left: 0px; z-index: 250;}

You can play with the position in pb:hover span
__________________
Don't let greediness blur your vision | You gotta let some shit slide
icq - 441-456-888
grumpy is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote