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 effect on hover with CSS?
To create an image overlay icon effect with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the <link>. On hover, the overlay effect will display an icon.
Set the CDN for the icons
To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Set the parent container for the card
A div is set for the card that includes the image, text as well as the caption. Within that, the icon is set using <i> −
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="hoverText">
<div class="caption">
<i style="font-size:150px" class="fa fa-tree" aria-hidden="true"></i>
</div>
</div>
</div>
Position the container
The card is positioned as relative using the position property −
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
The overlay effect
The transition property is set with the ease effect. On hovering the image, the overlay effect displays the icon −
img {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.hoverText {
position: absolute;
top:0;
height: 100%;
transition: .5s ease;
opacity: 0;
width: 100%;
text-align: center;
}
Caption Container
The caption container displays what will be visible when the mouse is hovered. The icon will be visible with a background which we have set here using the background-color property −
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding-top:30%;
border-radius: 6px;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
Example
The following is the code to produce image overlay icon effect on hover using CSS −
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
box-sizing: border-box;
}
.card-container {
display: inline-block;
position: relative;
width: 50%;
}
img {
opacity: 1;
display: block;
width: 100%;
transition: .5s ease;
backface-visibility: hidden;
}
.hoverText {
position: absolute;
top:0;
height: 100%;
transition: .5s ease;
opacity: 0;
width: 100%;
text-align: center;
}
.card-container:hover .hoverText {
opacity: 1;
}
.caption {
background-color: rgb(18, 53, 131);
color: white;
font-size: 30px;
padding-top:30%;
border-radius: 6px;
height: 100%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>Image Overlay Icon Example</h1>
<div class="card-container">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
<div class="hoverText">
<div class="caption">
<i style="font-size:150px" class="fa fa-tree" aria-hidden="true"></i>
</div>
</div>
</div>
</body>
</html>
866 Views
