How to fade an image with CSS without opacity?

You can’t fade the opacity of an element, without having what’s behind showing through.

The site you linked to isn’t fading the opacity of the image, but introducing a translucent layer over the top with the text in.

If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there’s no way to fade an image and not have what’s behind show through.

.container {
     background:#FFF;
}

.container img:hover {
     opacity:0.8;
}

Leave a Comment