How to Use CSS transition for Opacity Fade Background

CSS provides many beneficial properties to HTML elements. These properties help users to adjust the HTML elements, such as size, color, opacity, transition, and many more. More specifically, the “transition” property permits the developers to set the transparency level and add effects to the HTML elements. This particular function can make the web page more entertaining and engaging.

This post will instruct you about using the CSS transition for opacity fade backgrounds.

How to Use CSS transition for Opacity Fade Background?

The CSS “transition” property is utilized to change the property values within a specified duration gradually. Whereas the CSS “opacity” property adjusts the transparency level of elements.

To use CSS transition for opacity fade background, follow the provided steps.

Step 1: Create a Card in HTML

First of all:

• Add a “<div>” element and assign it a class “card”.
• Then, include the “<h2>” tag for setting a heading and the “<p>” element for specifying text content.
• After that, add an “<img>” tag for the image. The “src” attribute specifies the image’s URL, and the “class” attribute is set as “fade-img” to access the image in CSS for styling.

HTML

Step 2: Style the Card

The “.card” class is styled with the below-listed properties:

Here:

• “width” determines the element’s breadth.
• “height” determines the element’s height.
• “border” adds a border around the element.
• “margin” generates space around the element.
• “padding” produces space inside the element’s border.
• “border-radius” rounds the element’s edges.
• “position” property is set to “relative”, which is utilized for setting the element relative to its original position.

Output

Step 3: Adjust the Image

The “.fade-img” class is utilized in CSS to style the image. The image size and opacity will be adjusted in this class:

The following described properties are added to the “fade-img” class:

• “position” with the value “absolute” sets the element’s position corresponding to its nearly positioned element.
• The “top” and “left” are the offset properties that adjust the element from the top, left, right, and bottom.
• The “width” and “height” properties are used to specify the element’s area.
• “object-fit” property with the value “cover” makes the image fill the container.
• “opacity” value designates the transparency level.
• “transition” property with the value “opacity .25s ease-in” defines the opacity property that gradually moves in within the duration of “25s”.
• “cursor” property defines the cursor style.

Step 4: Add Opacity on hover

The “.fade-img:hover” is utilized to apply styling to the image when the pointing device hovers on it. Moreover, “:hover” is a CSS pseudo-class that is utilized to add styles on hover:

Here, the opacity level is adjusted to “0.9”.

Output

It can be observed that we have successfully applied the CSS transition property for fading the background.

Conclusion

To add a transition for opacity fade background, first, set the “<div>” area. Then adjust its size and opacity by using the CSS “width”, “height”, and “opacity” properties. Next, provide the “transition” property to it, which will determine how the property values change gradually over a specified duration. Then, the “opacity” is again set on the mouse hover by using the “:hover” pseudo-class. This post has explained the procedure on how to use transition property for opacity fade background in CSS.