-3

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

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
TheSepProject
  • 13
  • 2

2 Answers2

3

Using CSS you can do as follows:

ul:hover li {
  opacity: 0.5;
}

ul:hover li:hover {
  opacity: 1;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>
Ehsan
  • 12,655
  • 3
  • 25
  • 44
Kavitha Velayutham
  • 663
  • 1
  • 9
  • 27
-1

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>
Ehsan
  • 12,655
  • 3
  • 25
  • 44