TheSepProject TheSepProject - 1 year ago 104
CSS Question

How to make a Squarespace like social icon effect?

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

Answer Source

you can't do it with pure css and Sami's answer have bug.i explain in comment.

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 500ms;
}
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download