I am currently in the process of designing a "flat design" website, and I have opted to incorporate Simple Icons into my project. My goal is to have the background of the Simple Icon darken while the white overlay image remains unchanged. To achieve this effect, I crafted a list element (specifically a navbar) with anchor tags nested inside. Initially, I attempted setting the background image for the anchor as the icon itself, and adjusting the background color of the list item accordingly. Despite adding a transition property to fade the background color upon hover, it did not yield the desired outcome so I had to remove it from the code. Below you will find the snippet of CSS related to this segment of the site:
div#nav{
float:right;
width:auto;
height:37px;
padding-top:15px;
padding-right:15px;
padding-bottom:5px;
background-color:rgba(100,100,100,0.3);
border-left-color:rgba(255,255,255,0.2);
border-right-color:rgba(255,255,255,0.2);
border-right-width:1px;
border-right-style:solid;
border-left-width:1px;
border-left-style:solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:rgba(255,255,255,0.2);
margin-top:102px;
margin-left:2px;
}
#nav ul{
padding:0;
list-style:none;
margin:0;
}
#nav ul li{
width:32px;
height:32px;
margin-left:15px;
display:inline-block;
background-color:#000000;
border:0;
}
#nav ul li a{
z-index:10;
}
#facebook{
width:32px;
height:32px;
background-image:url('images/facebook.png');
}
Furthermore, below is the HTML structure pertaining to the aforementioned CSS styling:
<div id="nav">
<ul>
<li><a id="facebook" ></a></li>
<li><a id="twitter" ></a></li>
<li><a id="youtube" ></a></li>
</ul>
</div>
While I'm presently focusing on implementing functionality for just one icon at the moment, the end goal is to seamlessly display multiple icons along with smooth transitions between them. Any assistance or guidance in achieving this would be greatly appreciated. Here are the links to the individual simple icon images: