HTML-CSS: Sibling fade

Last update on March 08 2024 13:35:27 (UTC/GMT +8 hours)

HTML-CSS : Exercise-24 with Solution

Using HTML, CSS fades out the siblings of a hovered item.

Use a transition to animate changes to opacity.
Use the :hover and :not pseudo-class selectors to change the opacity of all elements except for the one the mouse is over to 0.5.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS fades out the siblings of a hovered item</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="sibling-fade"><!-- Comment: Defines a container for the sibling elements -->
<span>Case 1</span><span>Case 2</span><span>Case 3</span><!-- Comment: Defines three span elements as siblings -->
</div><!-- Comment: End of the sibling container -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a container div for sibling elements.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the sibling container, there are three span elements representing the sibling items.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
span { /* Comment: Styles all span elements */
  padding: 0 16px; /* Comment: Adds padding to the left and right of each span */
  transition: opacity 0.3s; /* Comment: Adds a transition effect to the opacity property */
}

.sibling-fade:hover span:not(:hover) { /* Comment: Selects span elements within .sibling-fade that are not being hovered over when .sibling-fade is hovered */
  opacity: 0.5; /* Comment: Reduces the opacity of non-hovered sibling spans */
}
</style> /* Comment: End of the CSS styling */

Explanation:

span selector styles all <span> elements, adding padding to the left and right and setting a transition effect on the opacity property.
.sibling-fade:hover span:not(:hover) selector targets <span> elements within .sibling-fade that are not being hovered over when .sibling-fade itself is hovered.
The opacity: 0.5; property reduces the opacity of non-hovered sibling spans to 0.5 when the parent .sibling-fade is hovered.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.