Log in

View Full Version : Image gallery



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?

coothead
04-06-2015, 10:58 PM
Hi there Atom,


there is no "HooverPopUp.css" file in the root directory...


http://www.siftradingsystems.com/HooverPopUp.css

...or in the "css" folder...


http://www.siftradingsystems.com/css/HooverPopUp.css

...so where have you hidden it? :D


coothead

Atom
04-07-2015, 03:32 AM
Hi there Atom,


there is no "HooverPopUp.css" file in the root directory...


http://www.siftradingsystems.com/HooverPopUp.css

...or in the "css" folder...


http://www.siftradingsystems.com/css/HooverPopUp.css

...so where have you hidden it? :D


coothead

Uh duh, do yose spel hoover with one o or 2?:o
Sorry, it works fine.