Definition:
Here, you are going to learn how an icon will appear over an image when you hover your mouse cursor over the image.
Let’s begin our design.
First, create a simple <html> code without any CSS code.
For this, you need an image and an icon. Make an HTML container and put your image and an icon in it.
You can use font Awesome icons and define a link in your HTML code before using it. See an example below:
HTML Source Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<div class="container">
<img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
<div class="overlay">
<a href="#" class="icon" title="thumbs-up">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
</div>
CSS Source Code:
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
}
.container:hover .overlay {
opacity: 0.5;
}
.icon {
background: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
Full Source Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<style>
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .3s ease;
}
.container:hover .overlay {
opacity: 0.5;
}
.icon {
background: white;
font-size: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<img src="https://www.elsebazaar.com/blog/wp-content/uploads/2019/03/About-Us-image.jpg" alt="Image Overlay Text" class="image">
<div class="overlay">
<a href="#" class="icon" title="thumbs-up">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
</div>
</body>
</html>
Output:
Donate to support writers.
You may be interested in the following topics:
- CSS Image Overlay Zoom
- CSS Image Overlay Icon
- CSS Image Overlay Title
- CSS Image Hover Overlay Slide from the right
- CSS Image Hover Overlay Slide from the left
- CSS Image Hover Overlay Slide from the bottom
- CSS Image Hover Overlay Slide from the top
- CSS Image Hover Overlay Fade In A Box
- CSS Image Hover Overlay Fade In Text
- CSS Image Hover Overlay