CSS3 Rollover Social Media Icons

There are many cool ways to display your social media icons on your website. Many of the more impressive animations required either jQuery or CSS3, and a little coding know-how. In this post I’ll focus on CSS3 examples. Below are some flashy examples that I came up with.

css3-social-media-icons
http://bradsknutson.com/

Slide rollover animation

This example requires a finite sized social media icon, and that you splice together two versions of the image one on top of the other. When you roll over any of the items, the background position is changed, and CSS3 takes care of the smooth transition.

CSS

.social-slide {
	background-image: url('path/to/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-slide:hover {
	background-position: 0px -48px;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Spinning rollover animation

Round or square images will work for this example. If you use square images, make sure you set the border-radius property.

CSS

.social-roll {
	background-image: url('path/to/gray/image.png');
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	border-radius: 50%;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
	transition: all ease 0.3s;
}
.social-roll:hover {
	background-image: url('path/to/color/image.png');
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}

Pop-out icons

Roll over these icons and it appears as if they are popping out of the page. This is accomplished by animating the position of the image and the box-shadow

HTML


<div class="social-popout"><img src="path/to/image.png" /></div>

CSS

.social-popout {
	height: 48px;
	width: 48px;
	margin: 10px;
	float: left;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img {
	border-radius: 50%;
	margin: 8px;
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
.social-popout img:hover {
	margin: 0px;
	box-shadow: 6px 6px 4px 4px rgba(0,0,0,0.3);
}
Categories Blog