HTML-CSS: Menu on image hover

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

HTML-CSS : Exercise-37 with Solution

Using HTML, CSS displays a menu overlay when the user hovers over the image.

Use a <figure> to wrap the <img> element and a <div> element that will contain the menu links.
Use the opacity and right attributes to animate the image on hover, creating a sliding effect.
Set the left attribute of the <div> to the negative of the element's width. Reset it to 0 when hovering over the parent element to slide in the menu.
Use display: flex, flex-direction: column and justify-content: center on the <div> to vertically center the menu items.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- HTML: Indicates the license information for the code -->
<!DOCTYPE html><!-- HTML: Declares the document type and version of HTML -->
<html><!-- HTML: Indicates the start of the HTML document -->
<head><!-- HTML: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- HTML: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- HTML: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS displays a menu overlay when the user hovers over the image</title><!-- HTML: Sets the title of the document -->
</head><!-- HTML: End of the head section -->
<body><!-- HTML: Contains the content of the HTML document -->
<figure class="hover-menu"><!-- HTML: Defines a figure element with the class "hover-menu" -->
	<img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-7.jpeg"/><!-- HTML: Inserts an image -->
	<div><!-- HTML: Defines a div element -->
		<a href="#">Home</a><!-- HTML: Creates a link to the home page -->
		<a href="#">Contact</a><!-- HTML: Creates a link to the contact page -->
		<a href="#">About</a><!-- HTML: Creates a link to the about page -->
	</div><!-- HTML: End of the div element -->
</figure><!-- HTML: End of the figure element -->
</body><!-- HTML: End of the body section -->
</html><!-- HTML: End of the HTML document -->

Explanation:

<figure class="hover-menu">:

Defines a figure element to contain the image and the menu.
The class "hover-menu" is added for styling purposes.

<img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-7.jpeg"/>:

Inserts an image with the specified source.

<div>:

Defines a div element to contain the menu links.

<a href="#">:

Creates link elements with "#" as the href attribute value, which typically refers to the current page.
Three links are created for Home, Contact, and About pages.

CSS Code:

.hover-menu {
  position: relative; /* CSS: Sets the positioning context for the element */
  overflow: hidden; /* CSS: Clips the content that overflows the element's box */
  margin: 8px; /* CSS: Sets the margin around the element */
  min-width: 340px; /* CSS: Sets the minimum width of the element */
  max-width: 480px; /* CSS: Sets the maximum width of the element */
  max-height: 290px; /* CSS: Sets the maximum height of the element */
  width: 100%; /* CSS: Sets the width of the element to 100% of its containing block */
  background: #000; /* CSS: Sets the background color of the element */
  text-align: center; /* CSS: Aligns the text content to the center */
  box-sizing: border-box; /* CSS: Includes padding and border in the element's total width and height */
}

.hover-menu * {
  box-sizing: border-box; /* CSS: Applies box-sizing to all child elements of the hover-menu */
}

.hover-menu img {
  position: relative; /* CSS: Sets the positioning context for the image */
  max-width: 100%; /* CSS: Sets the maximum width of the image to 100% of its container */
  top: 0; /* CSS: Sets the initial top position of the image */
  right: 0; /* CSS: Sets the initial right position of the image */
  opacity: 1; /* CSS: Sets the initial opacity of the image */
  transition: 0.3s ease-in-out; /* CSS: Specifies the transition effect for the image */
}

.hover-menu div {
  position: absolute; /* CSS: Sets the positioning context for the div */
  top: 0; /* CSS: Sets the initial top position of the div */
  left: -120px; /* CSS: Sets the initial left position of the div */
  width: 120px; /* CSS: Sets the width of the div */
  height: 100%; /* CSS: Sets the height of the div */
  padding: 8px 4px; /* CSS: Sets the padding of the div */
  background: #000; /* CSS: Sets the background color of the div */
  transition: 0.3s ease-in-out; /* CSS: Specifies the transition effect for the div */
  display: flex; /* CSS: Enables flexbox layout for the div */
  flex-direction: column; /* CSS: Sets the flex direction to column */
  justify-content: center; /* CSS: Aligns content vertically in the center */
}

.hover-menu div a {
  display: block; /* CSS: Displays the links as block elements */
  line-height: 2; /* CSS: Sets the line height of the links */
  color: #fff; /* CSS: Sets the color of the links */
  text-decoration: none; /* CSS: Removes underline from the links */
  opacity: 0.8; /* CSS: Sets the initial opacity of the links */
  padding: 5px 15px; /* CSS: Sets the padding of the links */
  position: relative; /* CSS: Sets the positioning context for the links */
  transition: 0.3s ease-in-out; /* CSS: Specifies the transition effect for the links */
}

.hover-menu div a:hover {
  text-decoration: underline; /* CSS: Underlines the links on hover */
}

.hover-menu:hover img {
  opacity: 0.5; /* CSS: Sets the opacity of the image on hover */
  right: -120px; /* CSS: Moves the image to the left on hover */
}

.hover-menu:hover div {
  left: 0; /* CSS: Moves the menu div to the right on hover */
  opacity: 1; /* CSS: Sets the opacity of the menu div on hover */
}

Explanation:

.hover-menu:

Defines the styling for the container element with class "hover-menu".
Sets its positioning, dimensions, background color, and text alignment.

.hover-menu *:

Applies box-sizing to all elements inside .hover-menu to include padding and border in their total width and height.

.hover-menu img:

Defines the styling for the image inside .hover-menu.
Sets its positioning, maximum width, initial opacity, and transition effect.

.hover-menu div:

Defines the styling for the overlay menu inside .hover-menu.
Sets its positioning, dimensions, background color, padding, and transition effect.
Uses flexbox to center the menu items vertically.

.hover-menu div a:

Defines the styling for the links inside the overlay menu.
Sets their display, color, opacity, padding, and transition effect.

.hover-menu:hover img:

Defines the styling for the image inside .hover-menu on hover.
Reduces its opacity and moves it to the left.

.hover-menu:hover div:

Defines the styling for the overlay menu inside .hover-menu on

HTML-CSS Editor:

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