How to Create an Image Overlay Icon using HTML and CSS ? - GeeksforGeeks

01 Apr, 2020
Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure using CSS.
Creating Structure: In this section, we will create a basic structure and also attach the CDN link of the Font-Awesome for the icons which will be used as an icon on hover.
CDN links for the Icons from the Font Awesome:<link rel=”stylesheet” href= “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<link rel=”stylesheet” href= “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
HTML code:<!DOCTYPE html><html>  <head>    <title>        Image Overlay Icon using HTML and CSS     </title>    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body>    <div class="container">        <h1>GeeksforGeeks</h1>        <b>Image Overlay Icon using HTML and CSS</b>        <div class="img">            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                 alt="Geeksforgeeks">            <div class="overlay">                <a href="#" class="icon">                   <i class="fa fa-user"></i>                </a>            </div>        </div>    </div></body>  </html>
<!DOCTYPE html><html>  <head>    <title>        Image Overlay Icon using HTML and CSS     </title>    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body>    <div class="container">        <h1>GeeksforGeeks</h1>        <b>Image Overlay Icon using HTML and CSS</b>        <div class="img">            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                 alt="Geeksforgeeks">            <div class="overlay">                <a href="#" class="icon">                   <i class="fa fa-user"></i>                </a>            </div>        </div>    </div></body>  </html>
Designing Structure: In the previous section, we have created the structure of the basic website where we are going to use as an image overlay icon. In this section, we will design the structure for the image overlay icon.
CSS code:<style>    body {        text-align: center;    }          h1 {        color: green;    }          /* Image styling */    img {        padding: 5px;        height: 225px;        width: 225px;        border: 2px solid gray;        box-shadow: 2px 4px #888888;              }          /* Overlay styling */    .overlay {        position: absolute;        top: 23.5%;        left: 32.8%;        transition: .3s ease;        background-color: gray;        width: 225px;        height: 225px;        opacity: 0;     }          /* Overlay hover */    .container:hover .overlay {        opacity: 1;    }          /* Icon styling */    .icon {        color: white;        font-size: 92px;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        text-align: center;    }</style>
<style>    body {        text-align: center;    }          h1 {        color: green;    }          /* Image styling */    img {        padding: 5px;        height: 225px;        width: 225px;        border: 2px solid gray;        box-shadow: 2px 4px #888888;              }          /* Overlay styling */    .overlay {        position: absolute;        top: 23.5%;        left: 32.8%;        transition: .3s ease;        background-color: gray;        width: 225px;        height: 225px;        opacity: 0;     }          /* Overlay hover */    .container:hover .overlay {        opacity: 1;    }          /* Icon styling */    .icon {        color: white;        font-size: 92px;        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        text-align: center;    }</style>
Final Solution: This is the final code after combining the above two sections. It will display the image overlay icon.
<!DOCTYPE html><html>  <head>    <title>        Image Overlay Icon using HTML and CSS     </title>    <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    <style>        body {            text-align: center;        }                  h1 {            color: green;        }                  /* Image styling */        img {            padding: 5px;            height: 225px;            width: 225px;            border: 2px solid gray;            box-shadow: 2px 4px #888888;        }                  /* Overlay styling */        .overlay {            position: absolute;            top: 23.5%;            left: 32.8%;            transition: .3s ease;            background-color: gray;            width: 225px;            height: 225px;            opacity: 0;        }                  /* Overlay hover */        .container:hover .overlay {            opacity: 1;        }                  /* Icon styling */        .icon {            color: white;            font-size: 92px;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            text-align: center;        }    </style></head>  <body>    <div class="container">        <h1>GeeksforGeeks</h1>        <b>Image Overlay Icon using HTML and CSS</b>        <div class="img">            <img src="https://media.geeksforgeeks.org/wp-content/uploads/20200326201748/download312.png"                 alt="Geeksforgeeks">            <div class="overlay">                <a href="#" class="icon">                   <i class="fa fa-user"></i>                </a>            </div>        </div>    </div></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?