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
<h2>Mr. John</h2>
<p>Technical Author</p>
<img src="/images/pexels-pixabay-220453.jpg" class="fade-img">
</div>
Step 2: Style the Card
The “.card” class is styled with the below-listed properties:
width: 300px;
height: 300px;
border: 1px solid rgb(232, 229, 232);
margin: auto;
padding: 15px;
border-radius: 10px;
position: relative;
}
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:
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 0.2;
transition: opacity .25s ease-in-out;
cursor: pointer;
}
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:
opacity: 0.9;
}
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.