How To Create Fade In Overlay Icon On Hover Using CSS

Posted By Bajarangi soft , Posted On 27-11-2020

using css and html we can create overlay icon .so today we discuss how to do it.

How To Create Fade In Overlay Icon On Hover Using CSS

Complete Code For Creating Fade In Overlay Icon On Hover Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Create Fade In Overlay Icon On Hover Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<style>
    .image_con {
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    .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;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5); /* Black see-through */
    }

    .image_con:hover .overlay {
        opacity: 1;
    }

    .icon {
        color: white;
        font-size: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
    }

    .fa-play:hover {
        color: #eee;
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: black;">Create Fade In Overlay Icon On Hover Using CSS</h1>
    </div>
    <div class="well">
        <div class="image_con">
            <img src="https://cdn.hipwallpaper.com/i/45/19/nWP5Fb.jpg" alt="Avatar" class="image">
            <div class="overlay">
                <a href="#" class="icon" title="User Profile">
                    <i class="fa fa-play"></i>
                </a>
            </div>
        </div>
    </div>
</div>
</body>
</html>