How to Transition CSS “display” + “opacity” Properties

In CSS, transition refers to a method for controlling the speed of the added element while applying the CSS properties on it. More specifically, you can perform various transitions, including page transitions, image transitions, text, and many more. You can specify the changes to be applied after a specific amount of time period, as opposed to having property changes take effect immediately.

This post explains the method for setting the transition with the help of CSS “display” and “opacity” Properties.

How to Transition CSS “display” and “opacity” Properties?

To transition CSS “display” and “opacity” properties, first, make a div container with the “<div>” element. Then, access the div container and add a background image with the help of the “background-image” property. After that, set the “transition”, “opacity”, and other required properties according to your choice.

Step 1: Create a “div” Container

Initially, make a div container with the help of the “<div>” container and add a class attribute with a particular name. To do so, we have set the name of the class as “item”:

Step 2: Set “display” Property

Next, access the div container by utilizing the class name “main-item” and set the “display” property:

Here, the value of the “display” property is set as “block” for taking up all screen width.

Step 3: Add Background Image

Next, apply the following CSS properties on the accessed div container:

In the above-stated code snippet:

• “height” and “width” properties determine the size of the defined element.
• “background-image” CSS property is used for inserting an image with the help of the “url()” function at the backside of the element.
• “opacity” determines the level of opacity for an element. The opacity level demonstrates the transparency level, where “1” is used for no transparency, and “0.5” is for “50%” transparency.
• “transition” in CSS permits the users to change property values smoothly over a given duration.
• “margin” defines the space outside the defined boundary around an element.

Output

Step 4: Apply “:hover” Pseudo Selector

Now, access the div container along the “:hover” pseudo selector that is utilized for selecting elements when we hover the mouse over them:

Then, set the “opacity” of the selected element as “1” to remove the transparency.

Output

That’s all about setting transition CSS “display” and “opacity” properties.

Conclusion

To set the transition “display” and “opacity” properties, first, make a div container by using the <div> element. Next, access the div element and set “display” as “block”. After that, apply the other CSS properties, including “background-image” to insert an image in the container, “transition”, “opacity”, and others. This post explained the method for setting the transition with CSS “display” and “opacity” properties.