Anonymous 0


I'm trying to build an image map using only css.

I want to be able and place a link on the 'map' then when someone hovers over it, it'll display an image - but I only want the image to appear when they're hovering over the link.

Here is my css:

    #volleyball {
    background-color: #FFFFFF;
    left: 10px;
    position: relative;
    top: 10px;
    width: 135px;

#volleyball a .large {
    border: 0px;
    display: block;
    height: 1px;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 1px;

#volleyball a img {
    border: 0;

#volleyball a.p1, #volleyball a.p1:visited {
    background: #FFFFFF;
    border: 1px solid #000000;
    display: block;
    height: 90px;
    left: 0;
    text-decoration: none;
    top: 0;
    width: 135px;

#volleyball a.p1:hover {
    background-color: #8C97A3;
    color: #000000;
    text-decoration: none;

#volleyball a.p1:hover .large {
    border: 1px solid #000000;
    display: block;
    height: 233px;
    left: 150px;
    position: absolute;
    top: -60px;
    width: 300px;

#map {
    background:url(map.jpg) top left no-repeat;
    font-family:arial, helvetica, sans-serif;

I cant seem to add my html properly here, sorry ...

Seems like an awful lot of css doesn't it?!

Thank you ~

2 answers

Jordan 469

Check out this page Pure CSS Image Hover

Answered almost 10 years ago by Jordan

Hi, sorry for not clarifying ...

I'm actually looking for something like this ( though I would remove the visibility hidden because I want the link name to show and I would like for an image to display when I hover over it.

Do you know how I could edit the code to make this work?

Thank you ~

Answered almost 10 years ago by Jennifer