View Full Version : CSS image gallery question

04-01-2011, 09:32 PM

I have created an image gallery based on this link:


Everything is working fine. My issue is that I have so many images in the gallery, that when someone scrolls to the bottom of the gallery page, the large "hover" image is stuck at the top of the screen, away from view. So I'd like to know if there's a way to wrap all the thumbnails in an iframe-like div without affecting the placement of the larger image. I'd link directly to it but I won't be able to upload anything to my site until later.

For the time being, this is the code I am using:

<title>Test Page</title>
<link rel="stylesheet" href="styles.css" type="text/css">

<div class="gallerycontainer">
<a class="thumbnail" target="_blank" href="images/001.jpg"><img src="images/001-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/001-preview.jpg" /><br /><div class="cap">Background 001</div></span></a>
<a class="thumbnail" target="_blank" href="images/002.jpg"><img src="images/002-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/002-preview.jpg" /><br /><div class="cap">Background 002</div></span></a>
<a class="thumbnail" target="_blank" href="images/003.jpg"><img src="images/003-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/003-preview.jpg" /><br /><div class="cap">Background 003</div></span></a>
<a class="thumbnail" target="_blank" href="images/004.jpg"><img src="images/004-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/004-preview.jpg" /><br /><div class="cap">Background 004</div></span></a>
<a class="thumbnail" target="_blank" href="images/005.jpg"><img src="images/005-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/005-preview.jpg" /><br /><div class="cap">Background 005</div></span></a>
<a class="thumbnail" target="_blank" href="images/006.jpg"><img src="images/006-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/006-preview.jpg" /><br /><div class="cap">Background 006</div></span></a>
<a class="thumbnail" target="_blank" href="images/007.jpg"><img src="images/007-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/007-preview.jpg" /><br /><div class="cap">Background 007</div></span></a>
<a class="thumbnail" target="_blank" href="images/008.jpg"><img src="images/008-thumb.jpg" width="52" height="65" border="0" /><span><img src="images/008-preview.jpg" /><br /><div class="cap">Background 008</div></span></a>

and the CSS:

position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/

.thumbnail img{
margin-right: 7px;
margin-bottom: 7px;
border: 2px solid gray;
-moz-box-shadow: 3px 3px 4px lightGray;
-webkit-box-shadow: 3px 3px 4px lightGray;
box-shadow: 3px 3px 4px lightGray;

background-color: transparent;

.thumbnail:hover img{


.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
float: left;
margin-left: 310px;
visibility: hidden;
color: black;
text-decoration: none;
font-family: arial, helvetica, sans-serif;
color: gray;
font-size: 14px;

.thumbnail span img{ /*CSS for enlarged image*/


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

Hopefully I've explained the issue properly, thanks for any help.

04-02-2011, 01:00 AM
One option is to use position: fixed on the container holding the enlargement image.

In this demo, as you scroll down the screen the thumbnails scroll with the browser but the enlargement container remains "fixed" near the top right hand corner of the window in full view.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
#wrapper {
width: 900px;
margin: 20px auto 0px auto;
position: relative;
#container {
position: absolute;
top: 0px;
left: 0px;
#enlargementContainer {
position: fixed;
top: 0px;
right: 20px;
display: none;
#container img {
display: block;
width: 300px;
<script type="text/javascript">
var oThumbs = document.getElementById('container').getElementsByTagName('img');
for(i=0; i < oThumbs.length; i++){
document.getElementById('imgEnlarge').src = this.src;
<div id="wrapper">
<div id="container">
<img src="pic1.jpg" alt="" />
<img src="pic2.jpg" alt="" />
<img src="pic3.jpg" alt="" />
<img src="pic4.jpg" alt="" />
<img src="pic5.jpg" alt="" />
<div id="enlargementContainer">
<img id="imgEnlarge" src="" alt="" />

04-04-2011, 07:03 PM
Thanks much bullant, this is already working out way better than what I had going, much cleaner and easier.

04-04-2011, 11:01 PM
you're welcome :)