Make navigation bar + other blog elements partially transparent

I’ve gotten quite a few questions recently about how to make the navigation bar and other elements slightly transparent so that’s what I’ll cover today. It’s really simple, just two lines of CSS that need to be applied to an element with a background. I’ll be using a navigation bar to demonstrate this tutorial but you can apply this effect to most blog elements, some work better than others.

Opaque vs. Transparent vs. “Translucent”

Transparent is clear or completely see through, for this we use

background-color: transparent;

Opaque is the opposite of transparent, for this we use a normal background declaration like

background-color: #FFFFFF;

Translucent or partially transparent is when the colour can be seen but the background behind the object is also slightly visible through it. For this we use

background-color: #FFFFFF; opacity: 0.5; filter: alpha(opacity=50);

as I’ll demonstrate below. Edit the value (number) for opacity level, 0.0 is fully transparent and 1.0 is fully opaque. If using RGBA instead of HEX VALUES (#FFFFFF) or Template Designer ($(tabs.background.color) $(tabs.background.gradient)) it would be background: rgba(255, 255, 255, 0.5);.

We add CSS in Blogger to above ]]> </b:skin> in Template > Edit HTML. If you cannot find ]]> </b:skin> then check this tutorial for help.

Making navigation menu slightly transparent

I have numerous tutorials here for adding navigation menus to your blog and adding other elements to your navigation. To make the drop down navigation menu shown in this tutorial slightly transparent we would add the above opacity declaration to #cssnav in Template > Edit HTML > Above ]]> </b:skin>

#cssnav {
opacity: 0.5;
filter: alpha(opacity=50); 
}

If using Bloggers tabs navigation, apply it to .tabs-inner .widget ul in Template > Edit HTML > Above ]]> </b:skin>

.tabs-inner .widget ul { opacity: 0.5;
filter: alpha(opacity=50); 
}

If using page list gadget on blogger you can apply it to .PageList or #PageList1 (could be #PageList2 or #PageList3 depending on your template and how many you’ve added). Go to Template > Edit HTML and paste above ]]> </b:skin>

#PageList1 { opacity: 0.5;
filter: alpha(opacity=50); 
}

If using my tutorial on how to make your navigation sticky here, add the opacity to #navigationbar or sticknav depending on which part of the tutorial you used. Paste it above ]]> </b:skin> in Template > Edit HTML.

#navigationbar{ opacity: 0.5;
filter: alpha(opacity=50); } 

or

sticknav { opacity: 0.5;
filter: alpha(opacity=50); } 

Fading opacity effect on hover

If you want your object to be opaque initially but when you hover over it it becomes slightly transparent then you’d use something like the following, here I’ve used Blogger post images as an example.

DEMO

.post-body img {
    opacity: 1.0;
    filter: alpha(opacity=100); 
}

.post-body img:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Adding effect to another element

If you want to add this effect to another blog element then you need to choose the correct selector and apply this effect to it. For example if you want to make your header image slightly transparent on hover/mouse/roll over then you’d use the selector #Header1_headerimg:hover.

Here is a recap of how to write CSS (from this post on understanding CSS in Blogger)

Selector { Property: Value; }

The selector is the HTML element you want to edit (heading, sidebar, paragraph). Declaration consists of a property and a value. Property (color, font, size) is the style attribute of the HTML element you want to edit and the value (black, 12px) is what you are changing it to.