CSS Social Media Sidebar

by fredd man

HTML

<div class="sticky-container">
		<ul class="sticky">
			<li>
                <a href="tel:+49(0)1734333202">
				<img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/09/phone-icon.png" />
				<p class="sticky">+49(0)1734333202</p>  
                </a>
			</li>
			<li>
				<a href="mailto:[email protected]">
                    <img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/09/email.png" />
                    <p class="sticky">E-Mail</p>
                </a>
			</li>
			<li>
                <a class="w-lang-item lang_en" href="http://wp2015.jambobukoba.com/en/">

				
                
				<img width="32" height="32" alt="English"  src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/09/United-Kingdom-flag-icon.png">
				<p class="sticky">English</p>
                    </a>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/06/geschenkspende.jpg" />
				<p>Spenden</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/06/freundewerden.jpg" />
				<p class="sticky">Freunde werden</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/09/news.png" />
				<p class="sticky">Newsletter</p>
			</li>
			<li>
				<img width="32" height="32" title="" alt="" src="http://wp2015.jambobukoba.com/wp-content/uploads/2015/06/100Prozent.jpg" />
				<p class="sticky">100%</p>
			</li>
		</ul>
	</div>
https://github.com/hasinhayder/StickySocialBar

CSS

.sticky-container{
		/*background-color: #333;*/
		padding: 0px;
		margin: 0px;
		position: fixed;
		right: -119px;
		top:130px;
		width: 200px;

	}

	.sticky li{
		list-style-type: none;
		background-color: #333;
		color: #efefef;
		height: 43px;
		padding: 0px;
		margin: 0px 0px 1px 0px;
		-webkit-transition:all 0.25s ease-in-out;
		-moz-transition:all 0.25s ease-in-out;
		-o-transition:all 0.25s ease-in-out;
		transition:all 0.25s ease-in-out;
		cursor: pointer;
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
                filter: gray; 
                -webkit-filter: grayscale(100%); 

	}

	.sticky li:hover{
		margin-left: -150px;
		/*-webkit-transform: translateX(-115px);
		-moz-transform: translateX(-115px);
		-o-transform: translateX(-115px);
		-ms-transform: translateX(-115px);
		transform:translateX(-115px);*/
		/*background-color: #8e44ad;*/
		filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
                -webkit-filter: grayscale(0%);
	}

	.sticky li img{
		float: left;
		margin: 5px 5px;
		margin-right: 10px;

	}

	.sticky li p{
		padding: 0px;
		margin: 0px;
		text-transform: uppercase;
		line-height: 43px;

	}

	

	p.sticky{
		color: #ecf0f1;
		font-family: "Lato";
		line-height: 28px;
		font-size: 15px;
		padding-top: 50px;
	}

	
	p a{
		color: #ecf0f1;
	}