JSFiddle - React, Tailwind, and code Playground

Social icon effect

by Jennifer Perrin

HTML

<div class="social-wrapper">
    <ul>
        <li class="social-icon flickr">
            <a class="light" href="#">
                <img width='24' height='24' title='' alt=''...

CSS

.social-icon {
	float:left;
	width:32px;
	height:32px;
	margin:0 5px 0 0;
	position:relative;
}
.social-icon a {
	display:block;
	position:relative;
	width:30px;
	height:30px;
	padding:0;
	margin-top:2px;
	background-color:#e5e5e5;
	border-radius:16px;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
}
#footer-wrapper .social-icon a {
	background-color:#a0a0a0;
}
.social-icon a.dark {
	background-color:#5f5f5f;
}
.social-icon img {
	position:relative;
	margin:3px;
}
.social-wrapper {
	display:inline-block;
	overflow:visible;
	padding:0;
	margin:35px 0 10px;
	min-height:26px;
	position:relative;
}
.social-wrapper ul {
	padding:0;
	list-style:none;
}
.social-wrapper .social-icon {
	float:right;
	width:30px;
	height:30px;
	margin:0 5px;
	display:inline-block;
}
.social-wrapper .social-icon:first-child {
	margin:0 0 0 5px;
}

JavaScript

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