Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Image Overlay Icon using HTML and CSS
Overview
An image overlay is an overlapping of two images or icons, in which one icon or an image is displayed on the screen while the other icon displays on the screen when the cursor is hovering over the first image. So to achieve this feature we should have basic knowledge of HTML and CSS with its properties of transition and animation. So for creating an overlay we will see a few examples regarding the creation of an inner overlay icon.
Algorithm
Step 1 − Create a HTML file in your text editor and create a HTML boilerplate in the file.
Step 2 − Now create a div container which contains both the image, one which is the static and other image icon which will be shown on hovering over the image.
Step 3 − Insert the img tag with a src attribute to it. Add the image link to the src attribute.
<img src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png">
Step 4 − Now insert the font awesome CDN link to the head tag of the HTML document. The CDN link is given below.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 5 − Now use the font awesome user icon class to make an overlay image.
<i class="fa fa-user">
Step 6 − Now create a style.css file in the same folder and link the style.css file to the HTML document.
<link rel="stylesheet" href="style.css">
Step 7 − Style the HTML element and make a styling so that on hovering over the image the overlay should appear.
Step 8 − The image overlay is created successfully.
Example
In this example we have created an image overlay using the images and the font awesome icon. The font awesome user icon class is imported from the font awesome library. So to build this we have created the two files in a folder, one file with index.html which contains the skeleton part of the feature and other is the style.css which contains the styling and main working of the feature.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<title>image overlay</title>
<style>
body{
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.overlayCont {
position: relative;
max-width: 300px;
border-radius: 5px;
}
img {
display: block;
width: 100%;
height: auto;
box-shadow: 0 0 5px grey;
border-radius: 8px;
}
.fa {
color: white;
font-size: 10rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.fa:hover {
color: #eee;
}
.hoverIcon{
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s all ease;
background-color: green;
border-radius: 8px;
}
.overlayCont:hover .hoverIcon{
opacity: 1;
}
h3{
color: white;
font-weight: 700;
font-family: 'Segoe UI';
text-align: center;
}
</style>
</head>
<body>
<div class="overlayCont">
<img src="https://cdn4.iconfinder.com/data/icons/creative-5/32/text-512.png">
<div class="hoverIcon">
<h3>tutorialspoint.com</h3>
<i class="fa fa-user"></i>
</div>
</div>
</body>
</html>
The given below images are the output of the above example, in which the first image shows the output when the above feature is loaded in the browser, and the second image shows the output when the first image is hovered by the cursor. So when any user hover over the mouse on the given image it shows an overlapping image.
Conclusion
This feature is used in applications like contact books in which a user's profile is displayed on an image and when the user clicks or hover over an image it shows the details of the particular profile. If you are building this feature then you must check whether both the image or icon, the static image and the image which is shown when the mouse is hovered should be of the same size that means equal width and height.
3K+ Views
