Atom
04-06-2015, 08:34 PM
I have used this image gallery: http://www.dynamicdrive.com/style/csslibrary/item/css-image-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.
/*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:
<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?
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.
/*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:
<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?