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.

  1.  permalink
    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
     permalink
    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.
  2.  permalink
    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
  3.  permalink
    Please explain a bit more where you want to add text?
Add your comments
    Username Password
  • Format comments as (Help)