Article Categories

Selected Reading

How to Create Image Overlay Icon using HTML and CSS

HTML Web Development Front End Technology

An image overlay is a visual effect where content appears on top of an image when a user hovers over it. This technique combines HTML structure with CSS positioning and transitions to create interactive visual elements commonly used in galleries, profiles, and portfolio websites.

Basic Overlay Structure

Creating an image overlay requires a container element with the base image and overlay content positioned absolutely within it. The overlay is initially hidden and becomes visible on hover using CSS transitions.

HTML Structure

<div class="overlay-container">
   <img src="image.jpg" alt="Base image">
   <div class="overlay">
      <!-- Overlay content goes here -->
   </div>
</div>

CSS Foundation

.overlay-container {
   position: relative;
   display: inline-block;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.overlay-container:hover .overlay {
   opacity: 1;
}

Simple Text Overlay Example

This example demonstrates a basic image overlay with text that appears on hover

<!DOCTYPE html>
<html>
<head>
   <title>Simple Image Overlay</title>
   <style>
      body {
         font-family: Arial, sans-serif;
         padding: 20px;
         display: flex;
         justify-content: center;
      }
      .overlay-container {
         position: relative;
         width: 300px;
         border-radius: 10px;
         overflow: hidden;
      }
      img {
         width: 100%;
         height: auto;
         display: block;
      }
      .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.7);
         color: white;
         opacity: 0;
         transition: opacity 0.4s ease;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
      }
      .overlay-container:hover .overlay {
         opacity: 1;
      }
      .overlay-text {
         font-size: 18px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div class="overlay-container">
      <img src="https://via.placeholder.com/300x200/4285f4/ffffff?text=Base+Image" alt="Sample image">
      <div class="overlay">
         <div class="overlay-text">Hover Overlay Text</div>
      </div>
   </div>
</body>
</html>

The overlay appears with a semi-transparent dark background and white text when you hover over the image.

Icon Overlay with Font Awesome

This example creates an overlay with Font Awesome icons that appear on hover

<!DOCTYPE html>
<html>
<head>
   <title>Icon Image Overlay</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <style>
      body {
         font-family: Arial, sans-serif;
         padding: 20px;
         display: flex;
         justify-content: center;
      }
      .overlay-container {
         position: relative;
         width: 300px;
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
      img {
         width: 100%;
         height: auto;
         display: block;
      }
      .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(45deg, rgba(67, 133, 244, 0.8), rgba(244, 67, 54, 0.8));
         color: white;
         opacity: 0;
         transition: all 0.5s ease;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
      }
      .overlay-container:hover .overlay {
         opacity: 1;
      }
      .overlay-icon {
         font-size: 3rem;
         margin-bottom: 15px;
         transform: scale(0.5);
         transition: transform 0.3s ease;
      }
      .overlay-container:hover .overlay-icon {
         transform: scale(1);
      }
      .overlay-title {
         font-size: 20px;
         font-weight: bold;
         margin-bottom: 8px;
      }
      .overlay-text {
         font-size: 14px;
         text-align: center;
      }
   </style>
</head>
<body>
   <div class="overlay-container">
      <img src="https://via.placeholder.com/300x200/28a745/ffffff?text=Profile+Image" alt="Profile">
      <div class="overlay">
         <i class="fas fa-user overlay-icon"></i>
         <div class="overlay-title">John Doe</div>
         <div class="overlay-text">Web Developer</div>
      </div>
   </div>
</body>
</html>

This creates a profile-style overlay with a user icon, name, and description that scales in smoothly on hover.

Multiple Icon Overlay

This example shows an overlay with multiple interactive icons

<!DOCTYPE html>
<html>
<head>
   <title>Multiple Icons Overlay</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <style>
      body {
         font-family: Arial, sans-serif;
         padding: 20px;
         display: flex;
         justify-content: center;
      }
      .overlay-container {
         position: relative;
         width: 300px;
         border-radius: 15px;
         overflow: hidden;
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
      }
      img {
         width: 100%;
         height: auto;
         display: block;
      }
      .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.6);
         opacity: 0;
         transition: opacity 0.4s ease;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .overlay-container:hover .overlay {
         opacity: 1;
      }
      .icon-group {
         display: flex;
         gap: 20px;
      }
      .icon-item {
         background-color: rgba(255, 255, 255, 0.2);
         padding: 15px;
         border-radius: 50%;
         color: white;
         font-size: 24px;
         cursor: pointer;
         transition: all 0.3s ease;
         transform: translateY(20px);
      }
      .overlay-container:hover .icon-item {
         transform: translateY(0);
      }
      .icon-item:nth-child(2) {
         transition-delay: 0.1s;
      }
      .icon-item:nth-child(3) {
         transition-delay: 0.2s;
      }
      .icon-item:hover {
         background-color: #4285f4;
         transform: scale(1.1);
      }
   </style>
</head>
<body>
   <div class="overlay-container">
      <img src="https://via.placeholder.com/300x200/6c757d/ffffff?text=Gallery+Image" alt="Gallery item">
      <div class="overlay">
         <div class="icon-group">
            <div class="icon-item"><i class="fas fa-heart"></i></div>
            <div class="icon-item"><i class="fas fa-share"></i></div>
            <div class="icon-item"><i class="fas fa-eye"></i></div>
         </div>
      </div>
   </div>
</body>
</html>

This creates a gallery-style overlay with heart, share, and view icons that slide up with staggered animations and scale on individual hover.

Key Implementation Tips

When creating image overlays, consider these important aspects

Container positioning Always use position: relative on the container and position: absolute on the overlay.
Smooth transitions Use CSS transitions on opacity, transform, or other properties for smooth animations.
Responsive design Ensure overlays work well on different screen sizes by using percentage-based dimensions.
Accessibility Include proper alt text for images and consider keyboard navigation for interactive overlays.
Performance Use CSS transforms instead of changing layout properties for better performance.

Common Overlay Patterns

Pattern	Use Case	Key Properties
Fade Overlay	Simple text or icon display	`opacity` transition
Slide Overlay	Revealing content from edges	`transform: translateX/Y`

Aman Gupta

Updated on: 2026-03-16T21:38:54+05:30

4K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next