How to remove photos from a website without changing HTML code only using CSS?

Yes, you can do it using CSS only, however JS would be a great option. There are many ways to do this using CSS, so lets dive in ;)

Before Proceeding, this is a short notice that the image element will be there in HTML - but only styles will make them disappear from the screen view.

1. visibility

The visibility property can be set to visible or hidden to show and hide an element:

You can use below CSS to hide all the images from the HTML.

img{visibility:hidden;}

Just put above CSS in the HTML style tags and all the images will not appear. But they will leave space for images. If you don't want that space to appear, then below is the solution to use display CSS property.

2. display

display is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.

You can use below CSS to hide all the images from the HTML.

img{display:none;}

This will remove all images as if they are not in HTML DOM anymore. Only images that are being shown as background image, or inside an iframe, will remain.

There are many more methods which you can use, like setting height or width to zero.

img {height: 0; width: 0;}

You can use !important to override the existing height property on the image or any other element in your HTML.

Thanks For Reading, if you have any other questions, you can ask in the comments below :)

• Tweet
• Share
• Share
• Share
• Share