Hide/Modify Specific Images

Its been awhile since I posted anything here, so I thought I would talk about hiding a specific image with CSS.

For example I will be using the guest/default image on this board.


Say I only want to show the default image within the profile and not in posts. This is actually quite simple since we can make use of the [attribute=value] CSS selector.

Since we only want to remove this image from one specific area, we need to find the unique selector of the element that its displayed inside. For phpbb3 that would be the postprofile selector.


Now that we have our selector we can choose to remove any image we want from the postprofile.

Code:

.postprofile img{
display:none;
}

The CSS above selects all images inside postprofile and removes them, but that's not what we want because that takes away everyone's character.

As I mentioned before we will need to make use of the [attribute=value] CSS selector to remove our specific image. For our selection of an image it would be [src="IMG SRC"], now that we have that we can work our magic!

Code:

.postprofile img[src="http://i57.servimg.com/u/f57/18/21/41/30/noaval10.png"]{
display:none;
}

The result would be the image noaval10.png being the only image not to be displayed in the postprofile.


We can also shorten this CSS by using the [attribute*=value] CSS selector. This will select any src attribute which contains the substring noaval10.png.

Code:

.postprofile img[src*="noaval10.png"]{
display:none;
}

The result of the code above will act the same as the image displayed previously.

Aside from removing these images we can also add almost any style modification to them that we want. Such as add hover effects, resize, shadows, and so on..

Code:

.postprofile img[src*="noaval10.png"]{
transform:scale(0.5);
}

Thanks for reading, and if you have any questions or something to add feel free to post here.

Comments under the images is best

What program you using?

I have FrontPage 2003, but I want to download new... And what you think about Dreamweaver (Adobe, I don't know right name :/ )

heehee, Sir Chivas was my test subject.

I use the Firefox devtool to do most of my coding. Their style editing is very useful, as well as the inspector to grab selectors. It comes in handy for reactive problem solving.

The scratch pad has also had updates which has allowed me to further practice my scripting.

I've never used Dreamweaver.

he Firefox devtool to do most of my coding. Their style editing is very useful, as well as the inspector to grab selectors.

How I can get it? Thanks.

http://www.mozilla.org/en-US/firefox/new/

Devtools can be opened by pressing F12, or:
Tools > Web Developer