CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

Adding Transparency to elements

The opacity property specifies the transparency of an element.


Transparent Box

The opacity property specifies the level of transparency of an element, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

opacity 0.9
opacity 0.5
opacity 0.2

The opacity applies to the element as a whole, including its contents, even though the value is not inherited by child elements.

Run code

Transparency using RGBA

If you do not want to apply opacity to child elements, use RGBA color values instead of opacity property.

transparency 90%
transparency 50%
transparency 20%
Run code

To learn more about RGBA Colors, visit: CSS Colors Chapter.



Transparent Image

You can also make transparent images using opacity property.

Chhatrapati Shivaji Terminus

opacity 1

Chhatrapati Shivaji Terminus

opacity 0.5

Chhatrapati Shivaji Terminus

opacity 0.2

Run code

You could also use CSS filter function to apply transparency to the image:

Run code

To learn more about CSS filters, visit: CSS Image Filters Chapter.


Transparent Hover Effect

The following example demonstrates a common use of CSS image opacity, where the opacity of an image changes when the user hover over the image with the cursor (mouse pointer):

Chhatrapati Shivaji Terminus
Chhatrapati Shivaji Terminus
Chhatrapati Shivaji Terminus
Run code

An example of reversed hover effect:

Chhatrapati Shivaji Terminus
Chhatrapati Shivaji Terminus
Chhatrapati Shivaji Terminus
Run code

Transparent Text Block Over Image

Title

Lorem ipsum dolor sit amet.

Title

Lorem ipsum dolor sit amet.

Title

Lorem ipsum dolor sit amet.

Run code