How To Create an Image Overlay Icon Using Html and Css

Posted By Bajarangi soft , Posted On 08-10-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

CDN links for the Icons from the Font Awesome

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>Bajarangi soft</h1>
    <b>Image Overlay Icon using HTML and CSS</b>
    <div class="img">
        <img src=
                     "logo.jpg"
             alt="Bajarangi soft">
        <div class="overlay">
            <a href="#" class="icon">
                <i class="fa fa-user"></i>
            </a>
        </div>
    </div>
</div>
</body>

</html>

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>

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: greenyellow;
        }

        /* Image styling */
        img {
            padding: 5px;
            height: 225px;
            width: 225px;
            border: 2px solid gray;
            box-shadow: 2px 4px #888888;
        }

        /* Overlay styling */
        .overlay {
            position: absolute;
            top: 18.5%;
            left: 38.9%;
            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>BAJARANGI SOFT</h1>
    <b>Image Overlay Icon using HTML and CSS</b>
    <div class="img">
        <img src=
                     "logo.jpg"
             alt="BAjarangi soft">
        <div class="overlay">
            <a href="#" class="icon">
                <i class="fa fa-user"></i>
            </a>
        </div>
    </div>
</div>
</body>

</html>