HTML-CSS: Sibling fade
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:
Explanation:
- This HTML code creates a simple webpage with a container div for sibling elements.
- The <!--License: https://bit.ly/3GjrtVF--> 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:
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.
Go to:
PREV : Popout menu.
NEXT : Evenly distributed children.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.