Icon Hover Effects Using HTML CSS (Hover Effect Source Code)

Icon Hover Effects Using HTML CSS (Hover Effect Source Code)

 

Welcome to Code With Random blog. In this blog, we will explore how to create an Icon Hover Effect. To create the Hover effect we are going to use simple HTML & CSS.

Hope you enjoy our blog so let’s start with a basic HTML structure for Icon Hover Effect.

We use these icon hover effects in almost all web pages we make and attach them to the footer of a webpage.

100+ Front-end Projects for Web developers (Source Code)

Html Code For Icon Hover Effect 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icons Hover Effect</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="box">
<div class="icon instagram">
<i class="fab fa-instagram fa-2x"></i>
</div>
<p>Instagram</p>
</div>
<div class="box">
<div class="icon facebook">
<i class="fab fa-facebook fa-2x"></i>
</div>
<p>Facebook</p>
</div>
<div class="box">
<div class="icon twitter">
<i class="fab fa-twitter fa-2x"></i>
</div>
<p>Twitter</p>
</div>
<div class="box">
<div class="icon whatsapp">
<i class="fab fa-whatsapp fa-2x"></i>
</div>
<p>Whatsapp</p>
</div>
</div>
</body>
</html>

Our HTML document is ready, here we have created a simple structure for various icons of different social media applications. We are using a font awesome library for the icons.

The output for our HTML document without CSS is available below.

Output Icon Hover Effects Html

 

Icon Hover Effects Css Code

Next, we will add style to the HTML structure. To add a hover effect to the social media icons we will use HTML :hover pseudo-class, which allows special styling for hover effects.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

When the cursor hovers over an object the hover pseudo-class applies special style properties to it.

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box{
width: 55px;
height: 58px;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
padding: 5px;
cursor: pointer;
margin: 0.6em;
transition: all .4s;
}
.box:hover{
width: 160px;
background: #c32aa3;
border-radius: 10px;
color: white;
box-shadow: 0 0 50px #b315917c;
}
.box:nth-child(2):hover{
background: #1877f2;
box-shadow: 0 0 50px #1876f285;
}
.box:nth-child(3):hover{
width: 130px;
background: #1da1f2;
box-shadow: 0 0 50px #1da0f280;
}
.box:nth-child(4):hover{
background: #25d366;
box-shadow: 0 0 50px #25d3657e;
}
p{
transform: translate(60px);
}
.box .icon{
position: absolute;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 10px;
margin-right: 10px;
transition: all .4s;
}
.instagram{
background: #c32aa3;
}
.facebook{
background: #1877f2;
}
.twitter{
background: #1da1f2;
}
.whatsapp{
background: #25d366;
}
.box:hover .icon{
background: white;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.26);
color: rgb(59, 59, 59);
}

Now we have completed our CSS section,  Here is our updated output with  CSS. Hope you like Icons Hover Effect, using CSS.

Final Output Icon Hover Effects

Github link of this project

For more such awesome projects read our other blogs and gain knowledge in front-end development. Thank you

5+ HTML CSS project With Source Code

In this post, we learn how to create an Icons Hover Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Icon Hover Effects Using HTML CSS (Hover Effect Source Code)”

Leave a Comment