How To Create an Image Overlay Icon Effect on Hover, with Font Awesome
Icons and Menus
How To, for Web Applications
By: Chrysanthus Date Published: 1 Mar 2025
An Image Overlay Icon is content with an icon (at the center) that comes over the avatar image, when the mouse pointer goes over the avatar image. The avatar is image that identifies the author of a post or some web content. When the avatar is clicked, the the profile page of the author should appear, at the browser. This tutorial explains how to Create an Image Overlay Icon Effect on Hover, with Font Awesome.
The icon is provided by the font-awesome/4.7.0 library that is free. The href value to this library must be typed into the link element in the head element, of the webpage (HTML file), so that it will be imported from its website.
The reader should copy the complete HTML code at the end of this tutorial into a text editor. Save the file with a name having the extension, .html. Open the file in the browser. Move the mouse pointer over the image and out of the image to appreciate the effect of image overlay icon (on hover). When the mouse is over the overlaid icon itself, it becomes a hand.
Web Page Skeleton
The skeleton of the web page is:
<!DOCTYPE html>
<html>
<head>
<title>Overlay Image Icon</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
An HTML document must have at least the head element and the body element within the HTML tags. The skeleton has the minimum that must be within the HTML tags. The script (JavaScript) tag pair will be empty in this case (there will be no JavaScript code for this tutorial example). The style element (tags) must have code for the example in this tutorial.
The title element (of start and end tag) in the head element has the webpage title that appears next to the favicon. The favicon link element (single tag element), has the path to the logo of the organization. This logo appears small, next to (on the left for Western European Websites) the title of the web page, at the browser tab. The next element in the head element, is a meta link element. Every modern webpage must have this single tag element, if the the page will be responsive. The next link element (single tag element) is to import the font-awesome/4.7.0 icon library from the cloudflare.com site.
Minimum Body Content for Image Overlay Icon Effect with Font Awesome
A minimum content for the HTML body element is:
<h2>Fade and Overlay Icon</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.jpeg" alt="Avatar" class="image">
<div class="overlay">
<a href="#" class="icon" title="User Profile"> <i class="fa fa-user"></i></a>
</div>
</div>
Above the div element is some content that the body element needs. There are actually two div elements: one nested inside the other. The outer div element is for the avatar image. The inner div element is for the overlay, which has an icon at its center. Both div elements have to be of the same size for complete overlay (see how below).
The avatar image (single) tag is inside the outer div but outside the inner div. Its source attribute brings in the avatar image. Allow the particular source attribute value in the code, in order to get the avatar image from broad-network.com. This means that when testing the complete code (below), the reader’s computer has to be connected to the Internet. The class-name for the image (tag) is "image". The class-name for the outer div is "container".
The class-name for the inner div is "overlay". This inner div has an anchor (hyperlink) element that when clicked, the profile webpage for the avatar (person) will appear at the browser. Since this is a teaching (pedagogic) document, the hash for the href attribute value, means that when the overlay icon in the anchor element is clicked, nothing will happen (no profile page will be loaded). The class-name for the anchor (a) element is "icon". The overlay content actually consists of the background of the inner div and the icon at its center.
The content of the anchor element is the HTML i element. The i element itself, has no content. The class-name for the i element is "fa fa-user". There are two CSS rules here, which are "fa" and "fa-user". These CSS rules are defined in the font-awesome/4.7.0 library, which should have been imported in the link element in the head element. The i element styled with the class attribute value, "fa fa-user" is the icon. Under this condition, this i element is considered as a character (of the alphabet) and all text styles, are applicable to it. For example, in order to make it larger, give it a larger font-size.
CSS Rules for the Style Element
The only CSS rules that the font-awesome/4.7.0 library bring into the webpage are the "fa" and "fa-user" rules, together as "fa fa-user", for the i class attribute value, thus forming the icon. CSS rules for the other elements: container div, image element and overlay div have to be provided for, by the web developer (website designer/programmer).
In fact, the CSS rules, "fa" and "fa-user" are not enough for the icon. Other style declarations such as color (foreground), font-size, position, etc. for the icon, have to be provided by the web developer. Recall that the icon is like an alphabetic character. So its color and other declarations are given as would be done for a character or text. In this example, the icon (i element) is the content of the anchor (hyperlink) element. The i element itself, does not have any content. It is just twisted to form an icon.
The Outer div container CSS Rule
div.container {
position: relative;
width: 100%;
max-width: 400px;
}
The position declaration value is relative. This position property and value is not optional. Though relative means that the div element should occur where it is typed, if this property and its value are omitted, the overlay inner div may fill the whole screen at width of 100%. So always have the declaration, "position: relative;" there. The width of 100% for a maximum width of 400px are used for the outer div container. The "max-width: 400px;" declaration, means that smaller screens can give a width less than 400px. It is expected that the height of the contained image will determine the height of this container div. So, there is usually no need to give the div height value.
Do not forget that the outer div is for the avatar image, and the inner div is for the overlay. Both should have the same dimensions.
The image CSS Rule
The image is the avatar. It is inside the outer div but outside the inner div. The CSS rule for the image is:
div .image {
display: block;
width: 100%;
height: auto;
}
Note that there is a space between "div" and ".image", in the selector, where as, there is no space between "div" and ".container" in the previous selector. It is assumed that the reader has studied the reason for this, when doing his/her course on CSS (Cascaded Style Sheet). Image is normally an inline element. It is made block here, so that anything typed on its right, within its parent container, goes below, the image (within its parent container). Anything typed on its left goes above the image in its parent container, because the image has been made block. The width of the image is 100%, meaning that it should occupy all the width of the parent container div. It is expected that the height of the image will determine the height of the container div. The declaration, "height: auto;" means that the browser should scale the height proportionally, according to the original image dimensions. This declaration, is not really optional, as some browsers may misbehave.
CSS Rule for Overlay Content with the Icon at its Center
The overlay content actually consists of the background of the inner div element with the icon at the center of the foreground. So the overlay content can be seen as the inner div element. A CSS rule is needed for the inner div element whose class-name is overlay, and another CSS rule is needed for the anchor (a) element in the inner div. Remember that the content of the anchor element is the icon. The icon is the modified i element, limitedly modified by the CSS rules, "fa" and "fa-user" from the font-awesome/4.7.0 library. The icon still needs more modification from the web developer (see below). However, the CSS rule for the inner div is:
div .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
The inner div element has to fill the width and height of its containing element, so its width is made 100% and its height is made 100%. Its position is absolute for it to cover all of its parent containing div. The distance from the top of its parent div to its own top is 0. The distance from the bottom of its parent div to its own bottom is 0. The distance from the left of its parent div to its own left is 0. The distance from the right of its parent div to its own right is 0. The background color of this cover div is red. The opacity is 0, meaning there is complete transparency from this cover div, to the avatar image. There is also complete transparency from the icon at the center of this cover div to its own area of the avatar image (div). The transition is .3s, meaning that when the mouse pointer goes over the superimposed divs, it will take 0.3s for the inner coded div of background color, red, with its centered icon, to become completely opaque, for the on-hover event, covering the avatar outer coded div (and its image). The icon at the center also covers its own part of the avatar, completely. When the mouse pointer goes out of the superimposed divs, it will take 0.3s for the reverse action to take place (0.3s for the complete covering to disappear).
The On-Hover Event
CSS can be used to create the on-hover event. This means that when the mouse pointer is over an element, the element should have new properties (new declarations). In this situation, when the mouse pointer goes over the overlay (covering) div, its background and icon content becomes opaque to the avatar div behind it. The CSS rule for this is:
div.overlay:hover {
opacity: 1;
}
Opacity of 1 means absolutely no transparency (complete opacity). It takes 0.3s for the transition to take place (see "div .overlay" rule above).
CSS Rule for the Icon
The icon (i element) is the content of the anchor (a) element. The CSS rules, "fa" and "fa-user" from the font-awesome/4.7.0 library, end up producing an icon of the size of an uppercase letter. It is the responsibility of the web developer (designer) to give the icon properties that the user would appreciate. For the example of this tutorial, the CSS rule that the user would appreciate is:
a.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The color is white, as can be given to an uppercase letter. The font-size is 100px as can be given to an uppercase letter; so the icon is at least 4 times bigger than an uppercase letter. Its position is absolute. Its position is absolute, relative to the inner coded div element, and not relative to its parent element, which is the anchor (a) element. This is because the anchor element does not have a position property, while the grand parent of <div class="overlay">, has an absolute position property, which is "position: absolute;" in the style element in the HTML head element.
Now that the position of the icon is absolute, how is it placed by code so that it appears at the center of the inner div element, <div class="overlay"> . The top edge of the icon is placed 50% down from the top of the inner div element. The left edge of the icon is placed, 50% to the right of the inner div element.
With the 50%, 50% displacement, the center of the icon would not be at the center of the inner div element. It would be slightly down the center of the inner div, and slightly to the right of the center of the inner div. In order to make the center of the icon and that of the inner div, be the same, the transform/translate property of "transform: translate(-50%, -50%);" is necessary. Here, "(-50%, -50%)" means, take the center of the icon, -50% of the icon height, upwards, and take the center of the icon, -50% of the icon width, leftwards.
CSS Rule for the White Area of the Icon itself, On-Hover
As soon as the mouse pointer enters the superimposed divs, the inner div in front of the outer div will become completely opaque. The icon at the center of the inner div, will also become opaque, though with white (foreground) color. However, that covering takes place continuously in 0.3s (transition time is 0.3s) to become complete covering. Before the mouse pointer reaches the icon, it is a pointer. The icon is the only content of the anchor (a) element. So when the mouse pointer goes over the icon (anchor element) it becomes a hand. For the example of this web page, the color (foreground color) of the icon is given a color that is slightly darker than white, when the mouse pointer goes over it. Consider the icon as a character (uppercase of the alphabet), whose color can change without changing the immediate surrounding background color of the character. The rule for that change is:
i.fa-user:hover {
color: #eee;
}
There are two CSS rules for the icon (i element), which are "fa" and "fa-user", obtained from the font-awesome/4.7.0 library. If the reader wants to know why the CSS rule, "fa-user" was chosen instead of "fa", then the reader should visit the site, cdnjs.cloudflare.com/ that hosts the font-awesome/4.7.0 library, for that (more) information. Of course, when the mouse pointer goes out of the icon, the color (foreground color) of the icon, becomes white again.
Complete Webpage Code
And there you have it: the complete web page code is:
<!DOCTYPE html>
<html>
<head>
<title>Overlay Image Icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="description" content="Short description of the Web Page.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
div.container {
position: relative;
width: 100%;
max-width: 400px;
}
div .image {
display: block;
width: 100%;
height: auto;
}
div .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
background-color: red;
}
div.overlay:hover {
opacity: 1;
}
a.icon {
color: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
i.fa-user:hover {
color: #eee;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Fade and Overlay Icon</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.jpeg" alt="Avatar" class="image">
<div class="overlay">
<a href="#" class="icon" title="User Profile"> <i class="fa fa-user"></i></a>
</div>
</div>
</body>
</html>
The reader should copy this complete HTML code into a text editor. Save the file with a name having the extension, .html. Open the file in the browser. Move the mouse pointer over the image and out of the image to appreciate, the effect of image overlay icon. When the mouse pointer is over the overlaid icon itself, it becomes a hand.
Thanks for reading.
Chrys
Related Links:
More Related Links:
Cousins
Menus
How to Create a Menu Icon with HTML and CSS and without using a LibraryHow To Create a Top Navigation Bar
How to Create Fixed Auto Height Sidebar Menu with CSS
How to Create a Horizontal Tabs Bar with their Sections using CSS and JavaScript
How to Create a Search Menu to Filter List Items, using CSS and JavaScript
How To Create a Responsive Top Navigation Bar with Left-aligned and Right-aligned Hyperlinks
How to Create a Top Fixed Horizontal Menu with CSS
How to Create a Vertical Navigation Menu for Smartphones and Tablets Using CSS and JavaScript
How to Create a Slide Down Full Screen Curtain Navigation Menu
How To Create a Responsive Collapsible Sidebar Menu
Images
Coming soon . . .Buttons
Coming soon . . .Forms
Coming soon . . .Filters
Coming soon . . .Tables
Coming soon . . .BACK