Image rollover using transparent .pngs

[pinandmountme]

I had to do this:

CSS:

figure {
float: left;
margin: 0px;
background-color: #000;
padding: 0;
}
figure img:hover {
opacity: .35;
}

HTML:

but, the black shapes are still loaded first because, I presume, the #000 color isn’t specified as a hover attribute?

What am I missing?

I had to delete the width as it’s different for every image. I also changed the margin to 0 and didn’t include the:

figure img {

}

part as I can’t see what it would do…

Please tell me what I’m doing wrong?

[pinandmountme]

[pinandmountme]

HTML is now above…

[pinandmountme]

Um, I really have no idea what I’m supposed to do then…

Every image is a different size and is positioned differently using divs.

Have a look here:

davidwightman.net/paintings.html

I don’t see how I can do this without divs…

Best

[pinandmountme]

I’ve put several of the images in figures rather than divs but the #000 color still loads before the image.

I’m lost…

[pinandmountme]

I’ve done this:

figure {

float: left;

margin: 0px;

padding: 0;

}

figure:hover {

background-color: #000000;

}

figure img:hover {

opacity: .35;

}

and

thanks so much for your help!

[Author]

Posts