JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bg">

<ul id="social_buttons">
    <li id="item_1"><img src="http://i43.tinypic.com/104rasi.png"></li>
    <li id="item_2"><img src="http://i43.tinypic.com/k4tide.png"></li>
    <li id="item_3"><img src="http://i44.tinypic.com/2ry0gt3.png"></li>
</ul>
        
</div>

CSS

#bg {
    height: 100px;
    width: 215px;
    background-color: black;
    position: relative;
}

#social_buttons img {
	 width: 24px; 
	 height: 24px;
	 
	-webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}



#social_buttons {
	list-style-type: none;
	position: absolute;
	top: 20px;
	right: 70px;
	
	-webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}


#social_buttons li {
	float: left;
	margin-right: 2px;
	
	-webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}


/*  puur css3 multiple hover animaties */
#social_buttons li {
    opacity: 0.8;
}

#social_buttons:hover li {
    opacity: 0.5;
}

#social_buttons li:hover {
    opacity: 0.9
}