This tutorial will guide you through the process of creating an engaging Icon Hover Effect Using CSS. We will cover the necessary HTML structure and CSS styling to achieve a visually appealing and interactive hover effect for your icons. Let’s get started!
Adding Header Assets
First, we need to include the necessary CSS stylesheets in the <head> section of your HTML document. This includes a reset stylesheet and Font Awesome for the icons.
<link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css'>
Creating the HTML Structure
Next, we’ll create the HTML structure for the icon list. Each list item will contain an icon and a text label, both wrapped in a link. Inline styles are used here to set the color for each list item using CSS variables.
<ul>
<li style="--clr:#2483ff;">
<a href="#">
<i class="fa-solid fa-house"></i>
<span>Home</span>
</a>
</li>
<li style="--clr:#fff200;">
<a href="#">
<i class="fa-solid fa-user"></i>
<span>Profile</span>
</a>
</li>
<li style="--clr:#ff253f;">
<a href="#">
<i class="fa-solid fa-heart"></i>
<span>Likes</span>
</a>
</li>
<li style="--clr:#25d366;">
<a href="#">
<i class="fa-solid fa-gear"></i>
<span>Settings</span>
</a>
</li>
<li style="--clr:#f32ec8;">
<a href="#">
<i class="fa-solid fa-magnifying-glass"></i>
<span>Search</span>
</a>
</li>
</ul>
Styling with CSS
Now, let’s style the icon list using CSS. This involves setting up the basic layout, styling the list items, and implementing the hover effect using CSS transitions and transforms.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: #222;
--clr: #fff;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bg);
}
ul {
position: relative;
display: flex;
gap: 50px;
}
ul li {
position: relative;
list-style: none;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.5s;
}
ul li::before {
content: '';
position: absolute;
inset: 30px;
box-shadow: 0 0 0 10px var(--clr),
0 0 0 20px var(--bg),
0 0 0 22px var(--clr);
transition: 0.5s;
}
ul li:hover::before {
inset: 15px;
}
ul li::after {
content: '';
position: absolute;
inset: 0;
background: var(--bg);
transform: rotate(45deg);
transition: 0.5s;
}
ul li:hover::after {
inset: 0px;
transform: rotate(0deg);
}
ul li a {
position: relative;
text-decoration: none;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
}
ul li a i {
font-size: 2em;
transition: 0.5s;
color: var(--clr);
opacity: 1;
}
ul li:hover a i {
color: var(--clr);
transform: translateY(-40%);
}
ul li a span {
position: absolute;
font-family: sans-serif;
color: var(--clr);
opacity: 0;
transition: 0.5s;
transform: scale(0) translateY(200%);
}
ul li:hover a span {
opacity: 1;
transform: scale(1) translateY(100%);
}
ul li:hover a i,
ul li a span {
filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
}
Final Notes
This concludes the tutorial on creating an engaging Icon Hover Effect Using CSS. By following these steps, you should have a visually appealing and interactive icon list. Remember to adjust the colors, sizes, and animations to match your design preferences.
That’s all! Hopefully, you have successfully created Icon Hover Effect Using Css.