Hiding Elements

abid786
avatar
rank newbie

newbie


Posts: 4
Joined: 2008-05-10

Posted: Sat, 2008-05-10 04:07

Hello All.

I am trying to create a simple image gallery (the idea is that thumbnail images enlarge when hovered upon). The follwing CSS is used:

#gallcont {position:relative;}    /*Just for positioning*/

.hider {
visibility: hidden;
}

.thumbnail:hover span {
visibility: visible;
top: 200px;
left: 500px;
}

The above CSS is applied to the following HTML:

<div id = "gallcont"> //Just for positioning (see CSS)
<a href = "#" class = "thumbnail"> //Used to allow :hover pseudoclass
<!--Thumbnail picture -->
<img src = "http://www.google.ca/intl/en_ca/images/logo.gif">

<!--Big Picture-->
<span id="noid">
<img src = "http://www.google.ca/intl/en_ca/images/logo.gif" class = "hider">
</span>
</a>
</div>

However, the above doesn't cause the image to be hidden? Why?

Thanks in advance!!

jeff_way
jeff_way's picture
rank Enthusiast

Enthusiast


Posts: 137
Joined: 2007-05-07
Location: Nashville

Don't use "visibility".

Posted: Sat, 2008-05-10 04:28

Don't use "visibility". Instead, use "display: none" ...and "display: inline".

-Jeffrey Way | <a href="http://www.detacheddesigns.com/blog" title="Detached Designs Blog">My Blog </a>