Social icon css hover

Social Icon con effetto rollover

by Nate Balcom

HTML

<div id="box">

  		<p>Pulsanti social effetto rollover:</p>
    
		<div class="social-nw">
			<a href="#" target="_blank" style="width: 31px; height: 31px; background: url(http://aleweb.eu/wp-content/uploads/2013/07/fb.gif); float:left; margin-right:1px;" class="sochov"></a>
			<a href="#" target="_blank" style="width: 31px; height: 31px; background: url(http://aleweb.eu/wp-content/uploads/2013/07/tw.gif); float:left; margin-right:1px;" class="sochov"></a>
		</div>

	</div> <!-- #box -->

CSS

div#box {
	width: 300px;
    height: auto;
    position: absolute;
    top: 20%;
    left: 20%;
    margin-top: -100px;
    margin-left: -100px;
}

div#box p {
	text-align: left;
}

.social-nw a {
	text-decoration: none;
	line-height: inherit;
	cursor: pointer;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.sochov:hover {background-position:bottom!important; }