Why only last image is displayed?

Iam building an image gallery. I want the page to display the thumbnails from the folder and then using CSS hover property, the bigger image be displayed. My thumbnails are named as image_th.jpg and the originals as image_bg.jpg. I have already done the coding, but when I hover over an image it displays only the last image from my folder(for each image). I don't understand why?

Here is the asp code:

<div id="content"><% 
dim objFSO,objFolder,objFile
Set objFSO=Server.CreateObject("Scripting.FileSystemObject")
Set objFolder=objFSO.GetFolder(Server.MapPath("hall"))
for Each objFile in objFolder.Files
 if LCase(right(objFile.Name,6)="th.jpg") then 
     Response.Write "<img src='hall/"& objFile.Name &"'>"
   else %>
    <span><% Response.Write "<img src='hall/"& objFile.Name &"'>" %></span>
   <% end if	
	Next
Set objFolder=nothing
Set objFSO=nothing %>
</div>

Code (markup):

and CSS:

#content span{
	background-color:#FFFF00;
	padding:0.5em;
	height:200px;
	width:200px;
	border:medium; 
	border-color:#FF0000;
	border-style:solid;
	position:absolute;
	left:20em;
	top:20em;
	visibility:hidden;
			 }
	#content img{height:100px;
		width:100px;
		border:thin; 
		border-color:#FF0000;
		 border-style:solid;}
	#content:hover span{
		 visibility:visible;
		 }

Code (markup):

 

why you have set the span visibility to hidden?
visibility:hidden;

 

because I want the original image to be displayed only when someone hovers over the thumbnail..not otherwise

 

Mods,

Can you please move this thread to CSS forum. I figured out that this is no more of an ASP problem. Its a CSS problem

Thanks

 

Means, if i understand well you have bug in your style. Actually hover effect is reserved only for the links.
Moreover a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
You cannot combine hover with CSS ID. That's why you see only the last image. Fix that and you'll see the rest of the images too.

Regards

 

Well, actually Pseudo-classes can be combined with CSS classes but not in a way you have done that.

 

yes, this is a css question
yugolancer answered already

yugolancer shall have a good rep

 

thnx for replying. but I am still not getting it. From your post I get that I am supposed to use <a> tag to use hover.
So, I modified the code as below. But now, it displays all the images(I have visibilty:hidden before hover over an image).And thre is no hover.

Here is the asp:

<div id="content">

<% 
dim objFSO,objFolder,objFile
Set objFSO=Server.CreateObject("Scripting.FileSystemObject")
Set objFolder=objFSO.GetFolder(Server.MapPath("hall"))
for Each objFile in objFolder.Files
 if LCase(right(objFile.Name,6)="th.jpg") then %>
 <a href="#resize" class="image">
    <% Response.Write "<img src='hall/"& objFile.Name &"'>" %> </a>
    <% else %>
    <span><a name="resize"><% Response.Write "<img src='hall/"& objFile.Name &"'>" %></a></span>
   <% end if	
	Next
Set objFolder=nothing
Set objFSO=nothing %>

	</div>

Code (markup):

and CSS:

.image img{height:100px;
		width:100px;
		border:thin; 
		border-color:#FF0000;
		 border-style:solid;}

	.image span {
	background-color:#FFFF00;
	padding:0.5em;
	height:200px;
	width:200px;
	border:medium; 
	border-color:#FF0000;
	border-style:solid;
	position:absolute;
	left:30em;
	top:30em;
	visibility:hidden;	
					 }
		
		.image:hover span{
		 visibility:visible;
		 		 		 }

Code (markup):