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

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”>

  • HTML code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Image Overlay Icon using HTML and CSS 
        </title>
        <link rel="stylesheet" href
    </head>
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <b>Image Overlay Icon using HTML and CSS</b>
            <div class="img">
                <img src=
                     alt="Geeksforgeeks">
                <div class="overlay">
                    <a href="#" class="icon">
                       <i class="fa fa-user"></i>
                    </a>
                </div>
            </div>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>

    chevron_right

    
    

Final Solution: This is the final code after combining the above two sections. It will display the image overlay icon.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Image Overlay Icon using HTML and CSS 
    </title>
    <link rel="stylesheet" href
    <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=
                 alt="Geeksforgeeks">
            <div class="overlay">
                <a href="#" class="icon">
                   <i class="fa fa-user"></i>
                </a>
            </div>
        </div>
    </div>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.