How To Create The Google Circles Effect With CSS & jQuery

This week’s Tutorial of the Week teaches you how to create a circle just like the one Google Circles use. As many of you might have already seen, one of the coolest features from Google’s new social project is the way you can easily add users to different circles to keep your social connections more organized.

This tutorial will only cover how to create the actual circle and have it grow when your mouse goes over it. You will not learn how to do the little profile images that appear around the circle, though if there is enough demand for me, I can work on that in the near future.

First off, this is what our circle should look like:

For this to work, you will need to include the jQuery library. Here’s the code you will need for that (it should go between your tags):

For this example, we will only be creating one circle. For this to work, we need to create 3 DIVs inside a parent DIV:

Text In Circle

The circle div will contain all the elements. The outer-circle is the grey border, the middle-circle is the circle with a grey background while the inner-circle is the blue circle which contains the text.

You will need quite a bit of CSS for this one. We will start by defining the style for the main DIV.

div.circle {margin: 100px auto;width:200px;height:200px;}

The properties above will position the circle. You can easily modify them to move them anywhere you want them to.

Next, we will start by adding some CSS to the outer-circle. I will add comments along the way so you can understand what the code includes.

div.outer-circle { /* Set the background and position */ background:transparent; width:122px; height:122px; /* Set the border and the border radius to be exactly half the width and height so that it looks like a circle */ -webkit-border-radius: 61px; -moz-border-radius: 61px; border-radius: 61px; border:1px solid #aaaaaa; /* You will need to use position:absolute so that the circles can appear on top of each other. Additionally, the z-index will be used to determine which DIV should appear lowest or highest */ position:absolute; z-index:800; /* Finally, we set the transition so that the circle grows with an animation */ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}

Next up, we need to set up another state for the outer-circle. The following properties will be used when your mouse is over the circle:

div.outer-circle.hover { -moz-transform: scale(1.45); -webkit-transform: scale(1.45); transform: scale(1.45);}

The above properties are used to scale the outer-circle.

Next, we need to add the CSS for the middle circle:

div.middle-circle { /* This margin is used to create the 1px border between the middle and outer circle */ margin:1px; /* Set the width and height */ width:122px; height:122px; /* Set the border radius to half the width and height to make it look like a circle */ -webkit-border-radius: 61px; -moz-border-radius: 61px; border-radius: 61px; /* Set the background gradient */ background: #ececec; /* Old browsers */ background: -moz-linear-gradient(top, #ececec 0%, #d8d8d8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ececec), color-stop(100%,#d8d8d8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#d8d8d8',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #ececec 0%,#d8d8d8 100%); /* W3C */ /* You will need to use position:absolute so that the circles can appear on top of each other. Additionally, the z-index will be used to determine which DIV should appear lowest or highest */ position:absolute; z-index:900; /* Finally, we set the transition so that the circle grows with an animation */ -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}

Similarly to the outer-circle, we also need to add a hover state:

div.middle-circle.hover { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4);}

Last, but not least, we need to specify the CSS for the inner-circle:

div.inner-circle { /* This margin is used to position the circle in the center */ margin:14px; /* Specify the background and width and height */ background:#3f96d1; width:96px; height:96px; /* Since we have text in it, we need to specify the text styles we want to use */ font-size:11px; color:#FFF; line-height:96px; text-align:center; font-family:Arial; /* Set the border radius to half the width and height to make it look like a circle */ -webkit-border-radius: 48px; -moz-border-radius: 48px; border-radius: 48px; /* For this circle, we will be using an inset box shadow to replicate the effect used. */ -webkit-box-shadow: inset 0px 1px 1px 0px #575757; -moz-box-shadow: inset 0px 1px 1px 0px #575757; box-shadow: inset 0px 1px 1px 0px #575757; /* We can also add a bottom border to make it look slightly more 3D */ border-bottom:1px solid #FFF; /* You will need to use position:absolute so that the circles can appear on top of each other. Additionally, the z-index will be used to determine which DIV should appear lowest or highest */ position:absolute; z-index:1000;}

With the CSS out of the way, we are ready for the jQuery code. The code itself is pretty simple:

$(function() {$('div.circle').mouseover(function() {$('div.outer-circle').addClass('hover');$('div.middle-circle').addClass('hover');});$('div.circle').mouseout(function() {$('div.outer-circle').removeClass('hover');$('div.middle-circle').removeClass('hover');});});

When the mouse goes over the circle div, jQuery adds the hover classes to both the outer-circle and the middle-circle. The mouse out event reverses those changes.

And here’s what the final circle should look like:

Although it might work differently to the way Google have done it, the code above shows you how to do something extremely similar which you can use for your own projects. A big well done to Google engineers who have done something that not only looks cool, but works extremely well.

Any comments? Post below.

Complete Post View Here