Question

How can I hide an image, but keep a border or opaque rectangle where the image used to be? Masking the image is acceptable too.

This has to work for images of different sizes, so hardcoding a containing div’s size and setting a border/bgcolor won’t work.

I guess I could wait for the image to load, get it’s dimensions, and then set its containing div to the same dimensions. Is there an easier way though?

Answer 1

Put the image into a container and center it to mimic the image’s border. Then fade out the image as you like (the opacity property is perfectly fine here) or set its visibility property to hidden.

This works for any kind of image, just do not set a width and height for the container. Use padding to achieve the desired borders.