Creating hovers using css

In Tutorials by Mary Lou August 8, 2012 130 Comments

Circle Hover Effects with CSS Transitions A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations.

Codrops

Subm

Page 1 of 37Circle Hover Effects with CSS Transitions

5/2/2015http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/

In todays tutorial well experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I 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, we are going to create some special hover effects for it!

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

We will omit vendor prefixes in this tutorial. But youll of course find them in the files.

So, lets get started!

The HTML

For most of the examples, well be using the following structure:

Use what you have div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;backface-visibility: hidden;

}

.ch-info .ch-info-back {transform: rotate3d(0,1,0,180deg);background: #000;

}

.ch-img-1 { background-image: url(../images/10.jpg);

}


}

.ch-img-3 {



and the typographical elements:

background-image: url(../images/12.jpg);}

.ch-info h3 {color: #fff;text-transform: uppercase;letter-spacing: 2px;font-size: 14px;margin: 0 15px;padding: 40px 0 0 0;height: 90px;font-family: 'Open Sans', Arial, sans-serif;text-shadow:

0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {color: #fff;padding: 10px 5px;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {display: block;color: rgba(255,255,255,0.7);font-style: normal;font-weight: 700;text-transform: uppercase;font-size: 9px;letter-spacing: 1px;padding-top: 4px;



On hover, well change the box shadow of the wrapper and rotate the parent of the back and frontface so that we see the back:

Example 5

In this example we want to scale down the inner thumbnail part to 0 and make the description element appear by fading

font-family: 'Open Sans', Arial, sans-serif;}

.ch-info p a:hover {color: rgba(255,242,34, 0.8);

}

.ch-item:hover .ch-info-wrap {box-shadow:

0 0 0 0 rgba(255,255,255,0.8), inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-item:hover .ch-info {transform: rotate3d(0,1,0,-180deg);

}



it in and scaling it down to 1.The structure of the fifth example will be the same as in the previous example.

The item has the usual style:

The wrapper of the description div and the info div itself will have the following common style:

Lets do again the hole trick by setting the same background of the body to the wrapper:

.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);cursor: default;

}

.ch-info-wrap,

.ch-info{position: absolute;width: 180px;height: 180px;border-radius: 50%;

}

.ch-info-wrap {top: 20px;left: 20px;background: #f9f9f9 url(../images/bg.jpg);



The front and the back (its not really a front and backface anymore) common style:

The front will have a transition (it will scale down and disappear):

And the back that holds the description will have 0 opacity initially and be scaled up to 1.5:

box-shadow:0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;

}

.ch-info .ch-info-front {transition: all 0.6s ease-in-out;

}

.ch-info .ch-info-back {opacity: 0;background: #223e87;pointer-events: none;transform: scale(1.5);



We need to set the pointer-events to none since we dont want the element to block everything elseremeber, its scaled up, we just cant see it because of its opacity, but its still there.

Background images and typographical elements as usual, just with some different colors:

transition: all 0.4s ease-in-out 0.2s;}


}


}


}


0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);



On hover well scale down the inner thumbnail part to 0 and set the opacity to 0. This will make it disappear into the back.

}

.ch-info p {color: #fff;padding: 10px 5px 0;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {display: block;color: #e7615e;font-style: normal;font-weight: 700;text-transform: uppercase;font-size: 9px;letter-spacing: 1px;padding-top: 4px;font-family: 'Open Sans', Arial, sans-serif;

}

.ch-info p a:hover {color: #fff;

}

.ch-item:hover .ch-info-front {transform: scale(0);opacity: 0;

}



The part that contains the description will be scaled down to 1 and faded in. Well also set the pointer event to whatever they were before because now we want to be able to click on the link:

Example 6

In this example we want to flip the inner thumbnail part down in order to reveal the description. The HTML will be the same like in the previous two examples.

The item will be styled as before:

.ch-item:hover .ch-info-back {transform: scale(1);opacity: 1;pointer-events: auto;

}



The common style of the wrapper and the description element:

The wrapper will have perspective:

The info element will need the following transform style:

.ch-item {width: 100%;height: 100%;border-radius: 50%;position: relative;box-shadow: 0 1px 2px rgba(0,0,0,0.1);cursor: default;

}

.ch-info-wrap,

.ch-info{position: absolute;width: 180px;height: 180px;border-radius: 50%;transition: all 0.4s ease-in-out;

}

.ch-info-wrap {top: 20px;left: 20px;background: #f9f9f9 url(../images/bg.jpg);box-shadow:

0 0 0 20px rgba(255,255,255,0.2), inset 0 0 3px rgba(115,114, 23, 0.8);

perspective: 800px;}



The front and the backface will have a transition. Note that this time well not set the backface-visibility to hidden, since we want the back of the inner thumbnail part to show when we flip it down:

Lets set the correct transform-origin so that we can open it down:

Well set an RGBA value with 0 opacity to the background of the description part:

.ch-info {transform-style: preserve-3d;

}

.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;transition: all 0.6s ease-in-out;

}

.ch-info .ch-info-front {transform-origin: 50% 100%;z-index: 100;box-shadow:

inset 2px 1px 4px rgba(0,0,0,0.1);}



And the usual style for the other elements:

.ch-info .ch-info-back {background: rgba(230,132,107,0);

}


}


}


}


0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {color: #fff;padding: 10px 5px;font-style: italic;margin: 0 30px;



On hover, well rotate the front part and animate the box shadow slightly. The back part will fade in its background color:

font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {display: block;color: rgba(255,255,255,0.7);font-style: normal;font-weight: 700;text-transform: uppercase;font-size: 9px;letter-spacing: 1px;padding-top: 4px;font-family: 'Open Sans', Arial, sans-serif;

}


}

.ch-item:hover .ch-info-front {transform: rotate3d(1,0,0,-180deg);box-shadow:

inset 0 0 5px rgba(255,255,255,0.2), inset 0 0 3px rgba(0,0,0,0.3);

}

.ch-item:hover .ch-info-back {background: rgba(230,132,107,0.6);

}



Example 7

The last example will act like a rotating cube where we reveal the description by rotating it in from the top back. Since we will rotate each of the faces, we wont need an extra wrapper. So, our HTML will look as follows:

Well give a perspective value to the item itself:

The element with the class ch-info will need the preserve-3d:

The front and backface will have a transition and the transform origin will be set to 50% 0%:

Lets set a nice inset box shadow to the front part:

position: relative;cursor: default;perspective: 900px;

}

.ch-info{position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;

}

.ch-info > div {display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;background-position: center center;transition: all 0.4s linear;transform-origin: 50% 0%;

}



The backface will be rotated initially in order to appear as the down face of a cube:

And the usual style for the background images and text elements:

.ch-info .ch-info-front {box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);

}

.ch-info .ch-info-back {transform: translate3d(0,0,-220px) rotate3d(1,0,background: #000;opacity: 0;

}


}


}


}

.ch-info h3 {color: #fff;text-transform: uppercase;letter-spacing: 2px;font-size: 24px;margin: 0 15px;



Well use translate3d to move the front part on the Y axis of our 3d space and rotate3d to actually rotate it. Well also fade it out because we dont want to see any part of it afterwards:

padding: 60px 0 0 0;height: 110px;font-family: 'Open Sans', Arial, sans-serif;text-shadow:

0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);

}

.ch-info p {color: #fff;padding: 10px 5px;font-style: italic;margin: 0 30px;font-size: 12px;border-top: 1px solid rgba(255,255,255,0.5);

}

.ch-info p a {display: block;color: rgba(255,255,255,0.7);font-style: normal;font-weight: 700;text-transform: uppercase;font-size: 9px;letter-spacing: 1px;padding-top: 4px;font-family: 'Open Sans', Arial, sans-serif;

}


}



Related Articles

The backface will be rotated back to 0 degrees (remember, initially it was rotated downwards):

And thats it! A whole bunch of hover effects that allow for many different variations, just try it out and play with it!

Hope you enjoyed these effects and find them inspiring!

Credits: Featured image illustration from Arnel Baluyots Stay Foxy.

.ch-item:hover .ch-info-front {transform: translate3d(0,280px,0) rotate3d(1,0,0opacity: 0;

}

.ch-item:hover .ch-info-back {transform: rotate3d(1,0,0,0deg);opacity: 1;

}



Fullscreen Form Interface

Animated Background Headers

Simple Morphing Search



Creating hovers using css

Documents

ef hover

special hover effects

commentscircle hover

chinfo p

chinfo h3

info div

css transitions522015http

px rgba0