CSS Opacity

CSS opacity is a property in CSS that allows you to make an element partially transparent. This property can be useful when you want to overlay text or images on top of a background image, or simply when you want to create a more subtle effect. The value of the opacity property can range from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

Let's see some examples to better understand how opacity works in CSS.

Example 1: Setting Opacity to 0.5

In this example, we will set the opacity of a text to 0.5, making it 50% transparent.

<p style="opacity: 0.5;">This text has an opacity of 0.5.</p>

Example 2: Setting Opacity to 0.3 on an Image

In this example, we will set the opacity of an image to 0.3, making it 30% transparent.

<img src="image.jpg" style="opacity: 0.3;">

Result:

Example 3: Hover Effect with Opacity

You can also use the :hover pseudo-class to create a hover effect with opacity. In this example, we will change the opacity of an image when the user hovers over it.

<img src="image.jpg" style="opacity: 1;">
<style>
img:hover {
  opacity: 0.5;
  }
</style>

Result: