Image gallery

**Atom** · 04-06-2015, 08:34 PM

I have used this image gallery: http://www.dynamicdrive.com/style/cs...gallery/#thumb

It works if I put the CSS in the header, but not if I put it in a .CSS file and provide a link like this:

<link href="HooverPopUp.css" rel="stylesheet" type="text/css" />

I put everything in there except for the <style></style> encapsulation.

Code:

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.gallerycontainer{
position: relative;}
/*Add a height attribute and set to largest images height to prevent overlaying*/


.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 10px;
}

.thumbnail:hover{position: relative;z-index: 0;
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 50px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Here's the html:

Code:

<div class="gallerycontainer" style="margin-left: 10px">
<a class="thumbnail" href="#thumb">Explanation<span><img alt="" src="images/ESCombo12MoEC.JPG" /></span></a>
</div>

Here's the page:http://www.siftradingsystems.com/P15Ea.html

How to make the open on hoover work?