CSS Magic: Build Social Media icons with dynamic hover transition effect
In this tutorial, we'll explore the art of designing a visually appealing and interactive social media icons hover effect using HTML and CSS. Elevate your web development skills by learning how to craft engaging social media icons with accompanying background effects.
Read More: Exceptional Login Form using HTML, CSS and JS | See Magic on Hover
This code snippet provides a sleek design for showcasing your social media presence on a website. Let's break down the components:
<div class="main-container">
<ul class="social-container">
<li class="item">
<a href="#">
<span class="fab fa-instagram"></span>
<span class="bg insta-bg"></span>
<span>Instagram</span>
</a>
</li>
<li class="item">
<a href="#">
<span class="fab fa-linkedin"></span>
<span class="bg link-bg"></span>
<span>Linkedin</span>
</a>
</li>
<li class="item">
<a href="#">
<span class="fab fa-whatsapp"></span>
<span class="bg whats-bg"></span>
<span>Whatsapp</span>
</a>
</li>
<li class="item">
<a href="#">
<span class="fab fa-pinterest"></span>
<span class="bg pint-bg"></span>
<span>Pinterest</span>
</a>
</li>
<li class="item">
<a href="#">
<span class="fab fa-facebook"></span>
<span class="bg face-bg"></span>
<span>Facebook</span>
</a>
</li>
</ul>
</div>
- The main-container holds an unordered list (ul) with a class of social-container.
- Each list item (li) represents a social media platform, containing a link (a) with an icon, background, and platform name.
- Icons are sourced from FontAwesome, and you can customize them based on your preferred social media platforms.
- Background spans (e.g., insta-bg) provide a visually appealing background behind the icons.
- Platform names are included for accessibility and user understanding.
Must Read: Interactive Quiz Web App using HTML CSS JavaScript Project | With Levels
The magic happens with CSS! We've applied styles to create a visually appealing and responsive social media container. Styles include hover effects, background colors, and icon placement.
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.css');
.main-container {
display: flex;
height: 100%;
width:100%;
justify-content: center;
align-items: center;
}
.social-container {
display: flex;
flex-direction: column;
gap: 15px;
padding: 0;
margin: 0;
}
.item {
width: 40px;
height: 40px;
display: flex;
cursor: pointer;
position: relative;
transition: all .3s;
list-style: none;
}
.item a {
width: 100%;
height: 100%;
display: flex;
text-decoration: none;
}
.fab {
width: 100%;
height: 100%;
font-size: 18px;
transition: .3s;
display: grid;
place-items: center;
border-radius: 50%;
color: rgba(255, 255, 255, 0.878);
border: 1px solid rgba(156, 156, 156, 0.256);
}
.bg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
border-radius: 30%;
transition: all .3s;
}
.insta-bg {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.link-bg {
background: rgb(1, 80, 123);
}
.whats-bg {
background: #15a54a;
}
.pint-bg {
background: #E60023;
}
.face-bg {
background: #215eae;
}
.social-container .item:hover .bg {
transform: rotate(25deg);
transform-origin: bottom;
}
.social-container .item:hover .fab {
background-color: rgba(156, 156, 156, 0.466);
}
.social-container .item:hover span:last-child {
transform: translateX(60px);
width: 100px;
}
.social-container .item span:last-child {
position: absolute;
color: white;
font-family: 'calibri';
width: 0px;
overflow: hidden;
z-index: -1;
top: 10%;
transform: translateX(20px);
transition: .3s;
}
- Each social media item (.item) is styled with a fixed width and height of 40 pixels, and it transforms on hover with a smooth transition effect.
- The link (a) within each item takes up the full width and height of the item and has no text decoration.
- The social media icons (.fab) are circular and centered within their respective items. They have a subtle border and color transition on hover.
- The background span (.bg) serves as a background for each icon and undergoes a rotation and color transition on hover.
- Different classes like .insta-bg, .link-bg, etc., define specific gradient backgrounds for each social media platform.
- Hovering over an item triggers transformations, such as rotation and width adjustments, to create an interactive effect.
- The last child of the link span within each item expands its width and shifts its position on hover, revealing the name of the social media platform with a smooth transition.