JSFiddle - React, Tailwind, and code Playground

Social icon effect Rework

by Jennifer Perrin

HTML

<div class="social-wrapper">
    <ul>
        <li class="social-icon facebook">
            <a class="light" href="#">
                <img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAYAAABxVAqfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUZJREFUeNpiYBgFwx0wkqvROmpWAJAyQBc/uiytgRj9LGRYKACk9mOzFAqIspiJDM8W4LGUaECOxf7UiGMWMvSg+/YDECdCaZpajA4uABPUBnoENX2zEzA174cyHbAE9QWk7ORI7aB2wCEugEeObkF9YaAs/kD1OEaK6/9oQgeIjddBkapHLR61eNTioW8xOfVxIxr/wWibeRRgrRaxVHOj+Xi0AAEDWxMFBlV5YQzxeWvP0sZiHi42hsk1PlgtJcVikoM6zFMXp6U0jWNbY/mBiWN033759ouhdeZBhi9ff9InccHA7YdvGQ6feTAMsxMoJeMKemS53JYt1LXYUFMSZ/bCJUe3oAbF94BYDErhVI9jm+jZYPrI0lQU8fPXnxMdr6PV4qjFoxaPWjwwDYF5686h8F+8/kwni4lszI3G8aCxGCDAAN97TdYugvcyAAAAAElFTkSuQmCC'>
            </a>
        </li>
    </ul>
</div>

CSS

.social-icon {
	float:left;
	width:30px;
	height:30px;
	margin:0;
	position:relative;
}
.social-icon a {
	display:block;
	position:relative;
	width:30px;
	height:30px;
	padding:0;
	background-color:#e5e5e5;
}
#footer-wrapper .social-icon a {
	background-color:#a0a0a0;
}
.social-icon a.dark {
	background-color:#5f5f5f;
}
.social-icon img {
	position:relative;
	margin:1px 0;
}
.social-wrapper {
	display:inline-block;
	overflow:hidden;
	padding:0;
	margin:35px;
	min-height:30px;
	position:relative;
}
.social-wrapper ul {
	padding:0;
	list-style:none;
}
.social-wrapper .social-icon {
	float:right;
	width:30px;
	height:30px;
	display:inline-block;
}
.social-wrapper .social-icon:first-child {
	margin:0;
}

JavaScript

/* Social icon effect
================================================== */
jQuery(document).ready(function() {
	jQuery(".social-icon a").mouseenter(function() {
		jQuery(this).fadeTo(400,.8);
		jQuery(this).children('img').animate({"top":"-30px"},500,function() {
		    jQuery(this).css({"top":"-30px"}).fadeTo(500,1);
		});
	});
	jQuery(".social-icon a").mouseleave(function() {
		//jQuery(this).fadeTo(400,1);
		jQuery(this).fadeTo(400,1);
		jQuery(this).children('img').animate({"top":"0px"},500,function() {
		    jQuery(this).css({"top":"0px"}).fadeTo(200,1);
		});
	});
});