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 over 8 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 over 8 years ago by Jennifer