View Full Version : Please Help with CSS Image Gallery

10-31-2007, 09:12 PM

I've just joined this forum in hopes that I can get some assistance with the CSS Image Gallery. I'm very new at this, so forgive me if I get some of the jargon wrong. I have all the code in place for the css and the html. The assistance I need is as follows:

1. I would like the thumbnail images (width=80px height=59px) to be in a different location than at the top-left of the page. Actually, referring to the top-left corner of the first thumb in the block of thumb images, I would like the position to be at top=177px and left=513px. I would also like the block of thumbs to sit off TO THE RIGHT of the large image width=375px and height=275px (which I really would like to show up at top=160px and left=113px)

What code do I need to put where?

2. Is there a way for the large Image to always be visible? RATHER THAN JUST ON MOUSEOVER?

3. I would like to connect a link to the thumbs that direct to a "Page.html"

I've been struggling my way through this all day, every day, for over a week now, and I just can't seem to figure it out. I'm just too new at this to know what to do...I just seem to know at this point what not to do!:confused:

Hopefully, someone here can direct me? Thank you in advance. I'll watch for an answer.:)

11-01-2007, 05:50 AM
It seems to be a bit confusing regarding the first thing that You needs.May be its bcos for my bad english .:D

For the rest of the needs theres solution

I thing this change in CSS will help You .

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
background-color: lightyellow;
padding: 5px;
border: 1px dashed gray;
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: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;

Only issue is that You might need to use a fixed height or else use images with identical height and width. Else the image in the bottom will be visible.

Linking issue can be changed by just changing the

<a class="thumbnail" href="dhfsdhfsdfhgh">

I think this will solve Your issue ..

11-01-2007, 06:13 AM
Thank you for your response. I certainly appreciate your assistance. I will try to apply the changes you suggest and see where that takes me. As for the first question (of 3) I was hoping that there was a way for the thumbnails to reside in a different location than at the top left of the page. Anyway, I'm going to work on what you gave me & I'll post again with the results. Hopefully, you, or someone else, can check back to bring the entire issue to a close. Again, I am truly grateful. (If I knew how to add a "thank you" to your name, I surely would!)

11-01-2007, 06:22 AM
(If I knew how to add a "thank you" to your name, I surely would!)

You could actually thank the user by clicking the http://www.dynamicdrive.com/forums/images/buttons/post_thanks.gif button right under the post.

11-01-2007, 06:32 AM
And thank you, too, Peter!

11-01-2007, 06:47 AM
I'm so tickled!:) Those solutions were exactly what I needed. Now the only question remaining is:

How can I reposition the thumbnails to a different location?