CSS Icon Slide Hover Effect

byCodingFlicks -July 29, 2021

0

In this project, we are going to share a simple CSS animation example based on icon hover. I have shared CSS animation, JavaScript, bootstrap-based snippets before in this blog. Please check those by clicking the load more button at the bottom of the homepage.

HTML:

  <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS Icon Slide Hover Effect</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul>
        <li>
            <div class="icon">
                <a href="#">
                    <i class="fa fa-map-marker"></i>
                    <div class="text">123, Postal Address</div>
                </a>
            </div>
        </li>
        <li>
            <div class="icon">
                <a href="#">
                    <i class="fa fa-envelope"></i>
                    <div class="text">Mail@gmail.com</div>
                </a>
            </div>
        </li>
        <li>
            <div class="icon">
                <a href="#">
                    <i class="fa fa-phone"></i>
                    <div class="text">+121545455</div>
                </a>
            </div>
        </li>
    </ul>
</body>
</html>

CSS:

body{
            margin: 0;
            padding: 0;
            font-family:poppins;
            background: aliceblue;
        }
        ul{
            margin: 300px auto;
            width: 50%;
        }
        ul li{
            list-style: none;
            float: left;
            text-align: center;
            width: 33.33%;
        }
        ul li a{
            text-decoration: none;
            color: #333;
        }
        ul li a .fa{
            font-size: 4em;
            transition: .5s;
        }
        ul li a .text{
            opacity: 0;
            transition: .5s;
            transform: translateY(20px);
        }
        ul li:hover .fa{
            transform: translateY(-20px) scale(.5);
        }
        ul li:hover .text{
            transform: translateY(-20px);
            opacity: 1;
        }

I hope you like this simple snippet. Thanks for stopping by this blog.

Please do not enter any spam link in the comment box.