Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorhannastone
- CommentTimeMar 1st 2010
Hello everyone,
My name is Hanna and I'm new to CSSbeauty.com :)
My question is:
I have a simple page layout with 9 images on it (each image within a div) and what I want is when people rollover any one of those images the image get's swapped out with another div showing some content about that image. Is there a way of doing this with pure CSS?
Thanks in advance.
Hanna -
- CommentAuthorOscarKlink
- CommentTimeMar 1st 2010 edited
Hello Hanna.
Look at the example below, it should fix your problem:CSS:
div.nav {
height: 187px;
width: 136px;
margin:0;
padding:0;
background-image:url("logo-red.gif");
}
div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}
div.nav img {
width:100%;
height:100%;
border:0;
}
div.nav a:hover img {
visibility:hidden;
}HTML:
<div class="nav">
<a href="#">
<img src="logo.gif" width="187" height="136" alt="" />
</a>
</div>
Hope this was helpfull. -
- CommentAuthorhannastone
- CommentTimeMar 2nd 2010
Hi OscarKlink,
Thanks for taking the time to answer my question :)
I seems to work well, however I can't seem to add some text on the hover state of the image?? Any ideas....
x
Thanks,
Hanna -
- CommentAuthorOscarKlink
- CommentTimeMar 2nd 2010
Please explain a bit more where you want to add text?
1 to 4 of 4