I'm trying to get a Squarespace like social icon effects on my project.
You may check these examples below: http://eringreenawald.com
Look for the social icons, when you hover over an icon other icons gets transparent (or grey or something like that). Do you guys have any idea how to achieve this.
Normal view, while not hovering the cursor over a specific icon
When hovering over an icon. Here, I've placed my cursor on Twitter icon and instantly all other icons faded out to a lighter color
Try This:
$(document).ready(function(){
$("a").hover(function(){
$('a').css('opacity',0.5);
$(this).css('opacity',1);
},function(){
$('a').css('opacity',1);
})
})
a {
color: #000;
margin-right:5px;
transition: all 300ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>