Circle Hover Effects with CSS Transitions

In this tutorial Mary Lou will experiment with hover effects on circles. Since she have the border radius property, she can create circular shapes and they have been appearing more often as design elements in websites. One use that she especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, she is going to create some special hover effects for it!

Let’s define some common style for the list and the list items. Mary Lou can center the list items by using display inline-block and setting the text-align property of its parent to center. The first example is going to reveal the description by scaling it up and she will also animate the inset box shadow of the item itself. So let’s position the item and set a nice, bif inset box shadow and a transition. As you notices before, she has given two classes to the item (not the list item but its child division): one is ct-item and the other one will be used to define a specific background image.