HTML-CSS: Image overlay on hover

Last update on March 07 2024 13:21:51 (UTC/GMT +8 hours)

HTML-CSS : Exercise-3 with Solution

Using HTML, CSS create display an image overlay effect on hover.

Use the :before and :after pseudo-elements for the top and bottom bars of the overlay respectively. Set their opacity, transform and transition to produce the desired effect.
Use the <figcaption> for the text of the overlay. Set display: flex, flex-direction: column and justify-content: center to center the text into the image.
Use the :hover pseudo-selector to update the opacity and transform of all the elements and display the overlay.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- License information -->
<!DOCTYPE html><!-- Document type declaration -->
<html><!-- Opening HTML tag -->
<head><!-- Head section containing metadata -->
<meta charset="utf-8"><!-- Character encoding declaration -->
<meta name="viewport" content="width=device-width"><!-- Viewport meta tag for responsive design -->
<title>Using HTML, CSS create display an image overlay effect on hover</title><!-- Title of the HTML document -->
</head><!-- Closing head tag -->
<body><!-- Body section of the HTML document -->
<figure class="hover-img"><strong>Preview:</strong><br><!-- Figure element with class hover-img and preview heading -->
<img src="https://www.w3resource.com/html-css-exercise/html-css-practical-exercises/flower-2.jpeg"/><!-- Image element with source URL -->
<figcaption><!-- Figcaption element for image caption -->
<h3>Pansy <br/>Flower</h3><!-- Heading inside figcaption for flower name -->
</figcaption><!-- Closing figcaption -->
</figure><!-- Closing figure -->
</body><!-- Closing body tag -->
</html><!-- Closing HTML tag -->

Explanation:

The HTML document contains a figure element displaying an image with an overlay effect on hover.
The image source is provided using the tag with the appropriate URL.
Inside the figure, there is a figcaption element containing a heading with the name of the flower.
Comments are provided to explain each section of the HTML code, including the purpose of each element and attribute.
The license information is included as a comment at the beginning of the document.

CSS Code:

<style> /* Opening style tag for CSS */

/* Styling for the container of the hover image */
.hover-img {
  background-color: #000; /* Background color set to black */
  color: #fff; /* Text color set to white */
  display: inline-block; /* Displayed as an inline block */
  margin: 8px; /* Margin around the container */
  max-width: 250px; /* Maximum width of the container */
  min-width: 240px; /* Minimum width of the container */
  overflow: hidden; /* Overflow hidden to hide content outside container */
  position: relative; /* Positioned relative to its normal position */
  text-align: center; /* Text aligned to the center */
  width: 100%; /* Full width of the container */
}

/* Applying box-sizing and transition to all elements within the container */
.hover-img * {
  box-sizing: border-box; /* Include padding and border in element's total width and height */
  transition: all 0.45s ease; /* Smooth transition for all CSS properties */
}

/* Styling for the overlay before and after the image */
.hover-img:before,
.hover-img:after {
  background-color: rgba(0, 0, 0, 0.5); /* Background color with 50% opacity */
  border-top: 32px solid rgba(0, 0, 0, 0.5); /* Top border with 50% opacity */
  border-bottom: 32px solid rgba(0, 0, 0, 0.5); /* Bottom border with 50% opacity */
  position: absolute; /* Positioned absolutely within the container */
  top: 0; /* Positioned at the top */
  bottom: 0; /* Positioned at the bottom */
  left: 0; /* Positioned at the left */
  right: 0; /* Positioned at the right */
  content: ''; /* Empty content */
  transition: all 0.3s ease; /* Smooth transition for all CSS properties */
  z-index: 1; /* Overlay placed below other elements */
  opacity: 0; /* Initially hidden */
  transform: scaleY(2); /* Initial vertical scaling */
}

/* Styling for the image */
.hover-img img {
  vertical-align: top; /* Align image to the top */
  max-width: 100%; /* Maximum width of the image */
  backface-visibility: hidden; /* Prevents flickering during CSS transitions */
}

/* Styling for the caption of the image */
.hover-img figcaption {
  position: absolute; /* Positioned absolutely within the container */
  top: 0; /* Positioned at the top */
  bottom: 0; /* Positioned at the bottom */
  left: 0; /* Positioned at the left */
  right: 0; /* Positioned at the right */
  align-items: center; /* Align items vertically centered */
  z-index: 1; /* Overlay placed above other elements */
  display: flex; /* Displayed as a flex container */
  flex-direction: column; /* Items stacked vertically */
  justify-content: center; /* Center content vertically */
  line-height: 1.1em; /* Line height for text */
  opacity: 0; /* Initially hidden */
  z-index: 2; /* Overlay placed above other elements */
  transition-delay: 0.1s; /* Delay for transition effect */
  font-size: 24px; /* Font size for caption */
  font-family: sans-serif; /* Font family for caption */
  font-weight: 400; /* Font weight for caption */
  letter-spacing: 1px; /* Letter spacing for caption */
  text-transform: uppercase; /* Convert text to uppercase */
}

/* Hover effect for the overlay before and after the image */
.hover-img:hover:before,
.hover-img:hover:after {
  transform: scale(1); /* Scale effect on hover */
  opacity: 1; /* Show the overlay on hover */
}

/* Hover effect for the image */
.hover-img:hover > img {
  opacity: 0.7; /* Reduce opacity of the image on hover */
}

/* Hover effect for the caption */
.hover-img:hover figcaption {
  opacity: 1; /* Show the caption on hover */
}

</style> /* Closing style tag */

Explanation:

Comments are provided to explain each section of the CSS code, including the purpose of each rule and its styling effects.
The CSS code defines styles for creating an image overlay effect with hover animation.
Various properties such as background color, positioning, opacity, and transitions are used to create the desired visual effects.
The hover effects are applied using the :hover pseudo-class to enhance user interaction with the image.

HTML-CSS Editor:

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