Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Opacity / Transparency

10 minutes

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Opacity / Transparency

Transparent Image

The opacity property accepts values ranging from 0.0 to 1.0, where lower values indicate higher transparency.

Example

img {
opacity: 0.5;
}

Transparent Hover Effect

The opacity property is commonly utilized alongside the :hover selector to modify the opacity when the mouse is hovered over an element.

Example

img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
}

Example explained

The initial CSS block resembles the code in Example 1. Additionally, we’ve specified the behavior for when a user hovers over one of the images: the image should maintain full opacity (opacity: 1;) during the hover state.

Once the mouse pointer moves away from the image, the image will return to being transparent.

An instance of a hover effect that behaves in reverse.

Example

img:hover {
opacity: 0.5;
}

Transparent Box

When employing the opacity property to introduce transparency to an element’s background, all child elements also adopt the same level of transparency. This can result in difficulty reading text within an element that is fully transparent.

Example

div {
opacity: 0.3;
}

Transparency using RGBA

To prevent applying opacity to child elements, as demonstrated in the example above, utilize RGBA color values. The following example illustrates how to set the opacity solely for the background color without affecting the text.

In our CSS Colors Chapter, you’ve discovered that besides RGB, you can employ an RGB color value with an alpha channel (RGBA), which determines the opacity for a color.

An RGBA color value is denoted by: rgba(red, green, blue, alpha), where the alpha parameter ranges from 0.0 (completely transparent) to 1.0 (fully opaque).

Tip: Further insights into RGBA Colors will be provided in our CSS Colors Chapter.

Example

div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Text in Transparent Box

Example

<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class=”background”>
  <div class=”transbox”>
    <p>This is some text that is placed in the transparent box.</p>
  </div>
</div>

</body>
</html>

Example explained

Initially, we generate a <div> element (class=”background”) featuring a background image and a border.

Subsequently, within the aforementioned <div>, another <div> (class=”transbox”) is established.

The <div class=”transbox”> contains a background color and a border, rendering the div transparent.

Within the transparent <div>, text is enclosed within a <p> element.