Simple CSS Gallery: Image & Text Rollover

Create a simple CSS gallery with thumbnails, large images and text.

Demo

IMAGE ONE:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.
IMAGE TWO:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.
IMAGE THREE:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.
IMAGE FOUR:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.

HTML CODE

<div id="simple_gallery">
<a  href="#">  <img src="images/one_s.jpg" width="108" height="86" class="simple_thumbnails" /><span><img src="images/one.jpg" /><br />
 IMAGE ONE: Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu. </span></a>

 <a  href="#">  <img src="images/two_s.jpg" width="108" height="86" class="simple_thumbnails" /><span><img src="images/two.jpg" /><br /> IMAGE TWO:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.</span></a>

<a  href="#">  <img src="images/three_s.jpg" width="108" height="86" class="simple_thumbnails" /><span><img src="images/three.jpg" /><br /> IMAGE THREE:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.</span></a>

 <a  href="#">  <img src="images/four_s.jpg" width="108" height="86" class="simple_thumbnails" /><span><img src="images/four.jpg" /><br /> IMAGE FOUR:Lorem ipsum dolor sit amet, consectetur adiscing elit. In ut ligula. Fusce risus diam, dapibus eget, ullamcorper eu.</span></a>  </div>

CSS CODE

 
/*  Simple Css Gallery */

#gallery_container {
	background-color: #99CC99;
	height: 650px;
	width: 800px;
	padding:10px;
  	margin: auto;
	position: relative;
}

/* Drak Grey container that holds gallery */

#simple_gallery {
	background-color: #333333;
	height: 530px;
	width: 515px;
	position:relative;
	margin: auto;
}


#simple_gallery img {border: 5px solid #FFFFFF;}

/* Thumbnails styles */
.simple_thumbnails {
margin:5px;
float:left;	
}



/* Large rollover image styles */
#simple_gallery span img {
margin-bottom: 10px
}



#simple_gallery span{
visibility:hidden;
position:absolute;
top:120px;
color:#FFFFFF;
font-size:12px;
width:435px;
left:-1000px; /* prevents the browser to show scroll bar at bottom*/
	}

#simple_gallery a:link span {
color:#FFFFFF;
text-decoration: none;
visibility:hidden;
}

#simple_gallery a:visited span {
text-decoration: none;
color:#FFFFFF;
visibility:hidden;
}

#simple_gallery a:hover span{ /*CSS for enlarged image*/
visibility: visible;
position:absolute;
left: 30px; /*position where enlarged image is placed horizontally */
top:120px;
z-index: 50;
color:#FFFFFF;
}

#simple_gallery a:active span {
text-decoration: none;
color:#FFFFFF;
visibility:hidden;
}