CSS3 has given web designers some great new features to work with, from subtle text shadows to all out animation. As a web designer I always want to try new things and learn new techniques. I have found that working with CSS3 and all it is capable of, has forced me to think in a different way when working on websites. There is almost another dimension to think about. I have seen some really cool effects created just by using overflow hidden and simple animation of divs. What’s great is that it’s not even hard to achieve these great effects.

Today I thought I’d share with you a snippet of what can be achieved using a combination of border radius, transform and transition attributes.

Circle Hover Effect

Click here to see the demo. Click here to download the source.

Overview

This effect is created using a span and div wrapped in an “a” tag and turned into circles using border radius. The grey circle is the span and the image that appears when you hover over it is the div. The div is set to opacity 0 and is rotated 180 degrees to be upside down in its idle state. When you hover over the span the div is faded in over half a second and rotated back to 0 to be the right way up. I have also added some easing using the transition attribute.

The HTML

<div class="ch"><a href="#">
<span>Next</span></a></div>
<div style="background: url('images/1.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/2.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/3.jpg');"></div>
<a href="#">
<span>Next</span></a>
<div style="background: url('images/4.jpg');"></div>
<!-- cn-nav -->

The mark-up is very simple and there is nothing out of the ordinary. You may have noticed that the background image of each div is coded inline instead of in the css file. This is so that a simple class can be used to display different images. It also makes the animation a little smoother when changing the size of the element.

The CSS


.ch > a {
height: 220px;
width: 220px;
position:relative;
display:block;
float:left;
margin:10px;
}
.ch a span {
height: 150px;
width: 150px;
position: absolute;
top:50%;
left:50%;
display: block;
margin:-75px 0 0 -75px;
opacity: 0.9;
background: #666 url(../images/refresh.png) no-repeat center center;
text-indent: -9000px;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.ch a div{
height: 150px;
width: 150px;
position: absolute;
top:50%;
left:50%;
margin:-75px 0 0 -75px;
opacity: 0;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.ch a:hover span{
width: 220px;
height: 220px;
margin:-110px 0 0 -110px;
opacity: 0;
background-color:#666;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.ch a:hover div{
width: 220px;
height: 220px;
margin:-110px 0 0 -110px;
opacity: 1;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
border-radius: 110px;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

The first rule is some basic layout styling to set the A tags out on the page. We then style the span tag by centering it in the “a” tag and making it a circle using border radius. This is also where we include our transition statements to create the easing effect. After this we are styling the div tag. The main difference with the div tag is that it is rotated 180 degrees and hidden using opacity 0.

Then we come to the hover rules. The span is increased in size slightly and faded out. At the same time the div is rotated back to 0 degrees and faded in. Very simple stuff but it creates quite a neat effect.

Final Thoughts

This little effect is just a fraction of what can be achieved using some of the simple CSS3 attributes available. If you’re new to CSS3 take the source code and tinker with it. You will be surprised what you can learn by being hands on and playing around. If you have any questions please leave a comment below and I will be more than happy to help.