I was mistaken :
<<…in the property definition of ‘transparency’, there is …>>
it is of course “opacity”

” If the object has children, then the effect is as if the children
were blended against the current background using a mask where the
value of each pixel of the mask is ”

But what exactly does it mean ? thanks !

example use both on a button, and with opacity: 0 you can still click the button but with visibility: hidden you cant.

Hey Colin! Yeah, that’s an unfortunate side effect of using opacity on an element that has other elements inside of it: everything becomes opaque.

You might try separating the background image into its own element outside of the other elements and try using absolute positioning to line it up with everything else. That way, it will be isolated so the opacity affects it alone.

Which is ideal for the transparency of the elements, but all the text is also transparent too.
can you point me in the right direction. Still working on the CSS learning curve.

Has anyone noticed this new thing where if you define a background color like this; background-color: #000000b3; it adds opacity to it. This seems fairly new to me been trying to find documentation on it all morning. If anyone has more info, let me know (Only tried it in Firefox, no idea if it works in other browsers)

Gilbrizzle’s info is good as it relates to the topic of this article, which is the “opacity” attribute, but what Hassan is asking requires a simpler solution: don’t use “opacity”, but rather use RGB + “alpha” instead.

“opacity” attribute will apply to all of the attributes of the selector where it’s defined.

RGBA, however, only applies to the specific attribute it’s applied to and leaves the other attributes of the selector alone.

For example:

article {
  color: #000000; background: 
  rgba(180, 180, 180, 0.4);
}

Doing this gives a 40% level of transparency to the grey background, but the text in front of it remains black.

There are reasons to use either solution, so it’s a matter of which is best for what you’re trying to do. I think this simpler one may be you were looking for though.

Hey Andrew,

You need to create a class and call it in only on those images you wish to have the transparency.

CSS:

.transimage img{ [properties] }
.transimage img:hover{ [properties] }

HTML:

div class="transimage"
img src="" /
/div

img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

I can make my images opaque until I hover over them, …. but, how do I apply this only to specific images on the page?

@damien, wrap the box in a container with position:relative on it, put opacity on the child box, put your text element as a sibling to the box with opacity and use position:absolute to place it over its sibling.

Hassan, it sounds like you’re asking how to have opacity on a box while having text show inside the box that does not have opacity on it.

The opacity property will affect anything inside of it. So the technique I prefer is to:
1) wrap the box (that needs opacity) within a container and give it position:relative
2) give the box its opacity property (obviously)
3) put the text in its own container as an adjacent sibling to the opaque box, give it position:absolute, set the top & left properties however you want to set its placement

Earch