Circle Hover Effects with CSS Transitions

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

Circle Hover Effects with CSS Transitions

From our sponsor: Try Mailchimp today.

Circle Hover Effects with CSS Transitions

In today’s tutorial we’ll 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 you’ll of course find them in the files.

So, let’s get started!

The HTML

For most of the examples, we’ll be using the following structure:

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img-1">
			<div class="ch-info">
				<h3>Use what you have</h3>
				<p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-2">
			<div class="ch-info">
				<h3>Common Causes of Stains</h3>
				<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-3">
			<div class="ch-info">
				<h3>Pink Lightning</h3>
				<p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
			</div>
		</div>
	</li>
</ul>

Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. We’ll define them in the classes starting with “ch-img-“. Additionally, we’ll have a division for the description of the item with a title.

Now, let’s make some hover effects!

The CSS

Let’s define some common style for the list and the list items:

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

We can center the list items by using display inline-block and setting the text-align property of its parent to center.
The clearfix hack is by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/

Some of the examples will have a different structure but we’ll look into that for each example in more detail.

Example 1

CircleHoverEffects_01

The first example is going to reveal the description by scaling it up and we 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:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

As you notices before, we’ve 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:

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

.ch-img-2 { 
	background-image: url(../images/2.jpg);
}

.ch-img-3 { 
	background-image: url(../images/3.jpg);
}

The description element will be positioned absolutely and we’ll give it a semi-transparent background by setting an RGBA value. It’s opacity is going to be 0 and we’ll scale it down to 0, too:

.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.8);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

The title of the item will have some fitting paddings and margins and a smooth text shadow:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

The paragraph element has 0 opacity and a transition (we want to fade it in on hover but with a delay):

.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);
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
}

The link will be in uppercase letters and we’ll make the hover color yellow:

.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-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

And now, the interesting hover action!
The item will animate its box shadow’s spread radius from 16px to 1px:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

The description will fade in and scale up to 1:

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

And the paragraph of the description will just fade in (with a delay):

.ch-item:hover .ch-info p {
	opacity: 1;
}

And that’s the first example! Let’s take a look at the next one.

Example 2

CircleHoverEffects_02

The HTML structure in this example is the same as the first one.

In this example we will use the box shadow of the item to fill our circle and serve as the background of the description.
So, nothing special here, just the box shadow that has one more value line:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 0 rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

And the background-images:

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

.ch-img-2 { 
	background-image: url(../images/5.jpg);
}

.ch-img-3 { 
	background-image: url(../images/6.jpg);
}

The description will be scaled down again:

.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
	backface-visibility: hidden;
}

And let’s style the typographical elements:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 65px 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;
}

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

On hover we’ll animate the inset box shadow (the reddish one) to 110px spread radius. This will cover all the circle:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}

And we’ll scale up the description and fade it in:

.ch-item:hover .ch-info {
	opacity: 1;
	transform: scale(1);	
}

Example 3

CircleHoverEffects_03

In this example, we’ll play with rotation. The structure will be a bit different from the first two examples since we need to add the thumbnail as a second divison. So the list item will look as follows:

<li>
	<div class="ch-item">	
		<div class="ch-info">
			<h3>Music poster</h3>
			<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
		</div>
		<div class="ch-thumb ch-img-1"></div>
	</div>
</li>

The item division will be styled like before (with a subtle box shadow):

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

The thumbnail element will have a specific transform-origin (somewhere to the right middle) and a transition. This will be the element that we want to rotate down on hover so that it reveals the description element:

.ch-thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	transform-origin: 95% 40%;
	transition: all 0.3s ease-in-out;
}

Using the pseudo-class :after we’ll create a little brass fastener with a radial gradient:

.ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	top: 40%;
	left: 95%;
	margin: -4px 0 0 -4px;
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Let’s define the background images for each thumb element:

.ch-img-1 { 
	background-image: url(../images/7.jpg);
	z-index: 12;
}

.ch-img-2 { 
	background-image: url(../images/8.jpg);
	z-index: 11;
}

.ch-img-3 { 
	background-image: url(../images/9.jpg);
	z-index: 10;
}

The desciption element will be styled as follows:

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	background: #c9512e url(../images/noise.png);
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

The typographical elements will be positioned and styled the following way:

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	height: 85px;
	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);
}

The anchor will be a little circle that should move in from the right on hover:

.ch-info p a {
	display: block;
	color: #333;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 24px;
	margin: 7px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	opacity: 0;
	transition: 
		transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	transform: translateX(60px) rotate(90deg);
}

.ch-info p a:hover {
	background: rgba(255,255,255,0.5);
}

Since we want the movement and opacity to happen with a delay, but the background hover transition without, we’ll separate the transitions.

On hover we’ll rotate the thumb and move/rotate the link element:

.ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	transform: rotate(-110deg);
}
.ch-item:hover .ch-info p a{
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

Example 4

CircleHoverEffects_04

The forth example will involve some 3D rotations. So, we need to adjust the structured in order to have a container for the perspective and a front and backface. So, the list items will look as follows:

<li>
	<div class="ch-item ch-img-1">				
		<div class="ch-info-wrap">
			<div class="ch-info">
				<div class="ch-info-front ch-img-1"></div>
				<div class="ch-info-back">
					<h3>Bears Type</h3>
					<p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
				</div>	
			</div>
		</div>
	</div>
</li>

As you can see, we’ll add the background image to the item division and also to the front part of the flipping division.
The trick is to give the same background to the ch-info-wrap like the body. This will give the illusion as if our item has a hole.

The item will have the usual styling:

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

The extra wrapper will be used for the perspective and we’ll also add a transition for the box shadow:

.ch-info-wrap{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	perspective: 800px;
	transition: all 0.4s ease-in-out;
	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);

}

The ch-info div will need preserve-3d for the transform-style and we’ll give it a transition since this is the element we’ll rotate in 3d:

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

The front and the backface will have the following common styles:

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

The backface will be rotated so that we won’t see it initially:

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

And again, the background images:

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

.ch-img-2 { 
	background-image: url(../images/11.jpg);
}

.ch-img-3 { 
	background-image: url(../images/12.jpg);
}

…and the typographical elements:

.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;
	font-family: 'Open Sans', Arial, sans-serif;
}

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

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

.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);
}

Example 5

CircleHoverEffects_05

In this example we want to scale down the inner thumbnail part to 0 and make the description element appear by fading 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:

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

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

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

Let’s do again the “hole” trick by setting the same background of the body to the wrapper:

.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);

}

The “front” and the “back” (it’s not really a front and backface anymore) common style:

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

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

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

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

.ch-info .ch-info-back {
	opacity: 0;
	background: #223e87;
	pointer-events: none;
	transform: scale(1.5);
	transition: all 0.4s ease-in-out 0.2s;
}

We need to set the pointer-events to none since we don’t want the element to “block” everything else…remeber, it’s scaled up, we just can’t see it because of it’s opacity, but it’s still there.

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

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

.ch-img-2 { 
	background-image: url(../images/14.jpg);
}

.ch-img-3 { 
	background-image: url(../images/15.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	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 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;
}

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

.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. We’ll also set the pointer event to whatever they were before because now we want to be able to click on the link:

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

Example 6

CircleHoverEffects_06

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 {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

The common style of the wrapper and the description element:

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

The wrapper will have perspective:

.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 info element will need the following transform style:

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

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

.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;
}

Let’s set the correct transform-origin so that we can open it down:

.ch-info .ch-info-front {
	transform-origin: 50% 100%;	
	z-index: 100;
	box-shadow: 
		inset 2px 1px 4px rgba(0,0,0,0.1);
}

We’ll set an RGBA value with 0 opacity to the background of the description part:

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

And the usual style for the other elements:

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

.ch-img-2 { 
	background-image: url(../images/17.jpg);
}

.ch-img-3 { 
	background-image: url(../images/18.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 25px;
	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;
	font-family: 'Open Sans', Arial, sans-serif;
}

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

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

.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

CircleHoverEffects_07

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 won’t need an extra wrapper. So, our HTML will look as follows:

<li>
	<div class="ch-item">				
		<div class="ch-info">
			<div class="ch-info-front ch-img-1"></div>
			<div class="ch-info-back">
				<h3>Mouse</h3>
				<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
			</div>	
		</div>
	</div>
</li>

We’ll give a perspective value to the item itself:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	perspective: 900px;
}

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

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

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

.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%;
}

Let’s set a nice inset box shadow to the front part:

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

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

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

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

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

.ch-img-2 { 
	background-image: url(../images/20.jpg);
}

.ch-img-3 { 
	background-image: url(../images/21.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: 0 15px;
	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;
}

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

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

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

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

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

And that’s 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 Baluyot’s Stay Foxy.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 131

Comments are closed.
  1. how can i integrate this in the html
    “.ch-img-3 {
    background-image: url(../images/15.jpg);
    }” ,

    im trying to develop a post page for wordpress , i need to call de image in the html not in css for put there de php code for thumbnail

  2. Hi!!!! WOW!!!! grate! How can i make that work on iPhone – iPad? since the hover does not exist on mobile devices, i think the hover is the first click and the second one is tho official click an go.
    thanks!!!!

  3. If you don’t put in the webkit settings from the demo it won’t work guys,,, just want to give a heads up so it should have the following

    for the 1st tut you need to update your css to the following

    .ch-info {
    position: absolute;
    background: rgba(63,147,147, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: scale(0);

    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;

    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);

    -webkit-backface-visibility: hidden;
    }

    .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);
    opacity: 0;
    transition: all 1s ease-in-out 0.4s;

    -webkit-transition: all 1s ease-in-out 0.4s;
    -moz-transition: all 1s ease-in-out 0.4s;
    -o-transition: all 1s ease-in-out 0.4s;
    -ms-transition: all 1s ease-in-out 0.4s;
    transition: all 1s ease-in-out 0.4s;
    }

    .ch-item:hover .ch-info {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    }

    • OK thanks! is it the same for the 3rd example? I am trying to make it work on my iPad and iPhone but probably i am doing something wrong! i am missing something?

      thanks again!

    • On my iMac it is working perfect!!! but i can not make it work on i-Phone / iPad. something is wrong with the mouse over, which is the first touch and the second is the click.

      Can anyone help me?

      Thanks!

  4. I had a look at what i put for my code and i noticed that there seems to be like 4 css files when the tutorial has less you might want to look at the demo file and compare it since it looks like to me a bunch of stuff was missed on this tutorial.

    • Thanks for your your time! Your demo page also not working on mobile! can you send me the files that are missing? I am not so mach of a coder (basic HTML and CSS) and can not see what is missing! The DEMO 3 is that i am trying to get it work for my mobile site for iPad and iPhone but the hover in not working!

      any help is appreciated!!!!

      Thanks again!

  5. Do these samples work on IE7 and up ? They are all a circular image, can I change this, to another shape ?

  6. Very nice tutorial, but it doesn’t work well on iOS devices. The Hover effect works, clicking the link is impossible.

    How would you fix this?

  7. I resolved the issues on iPad and iPhone by handling the hover event with jQuery.

    Here is the solution:

    $(function(){ $('.ch-item').bind('hover', function(e){}); });

    I’ve been tested the code with iPhone 4S and iPad 2 and it works like a charm. Hope it helps.

    • You can add the code in any place of the page.

      E.g. you can add the code before closing the tag as in the following:

      the code

    • Hello Simone,
      I am trying that this Gallery works with iPhone and iPad.
      I have added this code between and :

      $(function(){
      $(‘.ch-item’).bind(‘hover’, function(e){});
      });

      But not work!!
      What I have to do?

      Thank you very much

    • Between he ader.

      scr ipt ty pe te xt jav ascript
      $(function(){
      $(‘.ch-item’).bind(‘hover’, function(e){});
      });
      scr ipt

    • Hi! Beautiful code. I am having a really hard time working it out for iOS, I saw the code
      snippet that Simone left, but it’s not working – or maybe I am not using it right?
      Can someone please explain how to make example two work on mobile devices??

  8. At first glance I thought this can not be done without flash. This is a amazing effect and with a lot of variety too. Thanks for sharing. Code snippets are really handy.

  9. Hi, love the tutorials you have on this site! One thing though, I tried this tutorial for myself but when I hover over the circle, the inner circle does not scale from the center, in fact, the scale property does not seem to work at all, all it does is fade in as the inner shadow goes.I have tried using all the vendor prefixes and nothing seems to work, would someone please help me with this?

    Here is a jsfiddle: http://jsfiddle.net/q4azd/

    • Why are you declaring all the other transform properties? If you’re not changing them you don’t need to declare them. Remove them and it works fine. Stop using CSS generators! 😉

  10. Hey Guys I love this first of all! Second, I too am having difficulty trying to mimic the hover effect on mobile devices.

    I am trying to use the code provided by the awesome Simone D’Amico
    $(function()
    {
    $(‘.ch-item’).bind(‘hover’, function(e){});
    });

    However, I am not successful 🙁
    My current code is written below please help!

    $(function(){$(‘.gl-item’).bind(‘hover’, function(e){});});

    Thanks!

  11. Hi guys,

    Another wonderful tutorial, thx for that!

    It doesnt work on IE9, I can live with that, that’s not a problem, the fallback is good enough.
    But I tried on IE10, which seems to support a bit more those CSS3 properties but the effect is weird and not the expected one.

    Does anyone have a chance to figure it out?

    Thx in advance

  12. Cool effects…IE 9 has fallback but IE8 can’t see anything not even showing the square itself..Any fix..?… Thanks

  13. Thanks. Nice sharing! Btw can i use this code in wordpress?? Bc i want to edit my wordpress gallery view. 😀

  14. I love these effects. I was wondering if anyone had got this to work on a fluid-responsive design (site).

  15. Guys, the code from Simone works perfectly.
    1) include the library jquery between the tag head
    2) put the code from simone after the tag body using the tag script obviously

    If you put the code, without the tag script, and without the calling of the jquery library inside the head, it’s not working 😉

    • Would it be possible for you to post an example of Simone’s code in use? I’ve included the library query in the head and have the code in the body, but no luck. Really appreciate your help!

    • before the closing head (), add the following code (and remove both &):

      and after the opening body (), add the following code (and remove both &):

      $(function(){
      $(‘.ch-item’).bind(‘hover’, function(e){});
      });

      worked for me, hope it will for you guys!

  16. Hye 🙂 May i ask ? How to copy it? If i want to use the example 6. What code i have to copy? I dont understand. Can you help me?

  17. First of all thanks for the great tutorial.
    Given the fact I will most probably get back here occasionally, I would really appreciate if you explained why do you transform the front element from example 7 with 280px instead the block’s dimension of 220px on hover? Is there a formula for calculating the proper transform offset in some way?

    Thanks a lot in advance and keep doing awesome stuff!

  18. hallo again:)
    i hv problem to make it work on my blog, would u tell me how exactly to apply this effect hover to blogger template?
    thanks,

  19. Hi.
    Is it possible to add a fourth circle? I’ve been trying to get 4 circles instead of 3 and just can’t figure it out.

  20. Estimados, no logro insertarlos en mi web, agrego los css, los js y el codigo html que aparece en un principio, pero no los muestra, ni siquiera muestra un indicio del efecto.

    Quizas estoy obviando algún paso la verdad no se mucho de programación pero por trabajo tengo que realizar una web. Y deseo agregar sólo el primer tipo de efecto, me parece genial. Ojalá me puedan ayudar. Estoy recien aprendiendo programacion HTML entonces me cuesta entender como lo puedo agregar en una seccion de mi web.

    ++++++++++++++++++++++++++++++++++++++++++++++

    Dear, I can not insert them into my web, I add the css, js and the code html that appears in the beginning, but does not display them, even shows an indication of the effect.

    Maybe I am ignoring any step the truth not be much programming but for work I have to make a website. And I want to add only the first type of effect, feel me great. Hopefully I can help. I’m just learning programming HTML then I can hardly understand how I can add a section of my site.

    • I can’t add it either for some reason. I add the CSS, the JS, it displays, but there’s no sign of any hover effects. Any clue?

  21. Awesome tutorials, awesome looking effects.

    Good to see also most browsers showing solid support for both CSS transitions and 3D transforms (even IE10 supports both of these things).

    Saw some comments earlier about getting these menu effects working on iPad, thanks for providing that.

    Also saw someone ask about getting these menu effects working in WordPress, and I have just done that. If anybody is interested, I have just completed a blog about what I did.

  22. First, NICE WORK HERE! These are gorgeous! Question – since Internet Explorer doesn’t support this is there a way to code it so that the images show up in IE and not a message saying “your browser does not support transitions?”

    • For some reason I couldn’t Reply to your Reply … but essentially yes the menu degrades quite well for browsers that don’t support CSS transforms (such as Opera and IE9) but for IE8 and older, the degradation is not quite as nice

      My results are based on my own test implementation of Menu Type 7 on this tutorial (which also throws WordPress and iPad compatibility into the mix, so could be a little skewed)

      IE7 / 8 doesn’t support CSS transitions or transforms, so you’re not going to see anything too impressive

      IE8 doesn’t support border radius, for example, so you just get squares instead of nice circles

      IE8 also doesn’t show the intended “front” of the menu item, only what lies underneath (but in this case, that’s better than only showing the unclickable front!)

      IE7 doesn’t even list the menu horizontally (I guess I should be able to fix that in my test site, but I haven’t bothered to try)

      If you browse this tutorial using IE7, it doesn’t even let you get to the demo page

      If you browse it using IE8, you can get to the demo page but none of them display at all (I think that’s more about making sure you see a nice demo, rather than showing you how well it degrades)

      See http://www.electricmayhemsolutions/emslab for a fairly simple implementation (that also works in WordPress, and on iPad)

      Whilst IE8 might still have a reasonable share of the market at 11% (and this figure will remain considerable for some time, I eXPect) you might want to check your own analytics to see who is visiting your site (if you were planning on implementing on your own site). It might not be as big a factor.

      Alternatively you could detect the browser version, if unhappy with the level of degradation, and offer up a different style menu for users with less than IE9.

  23. Helo!! well first off all really nice effects!! 🙂 I just wanted to know if its possible for the style to be in only one page?

  24. Hello! First of all thank you for sharing this awesome content!
    It helped me so much with the development of my website.
    But i have a question, i was checking my website on my mobile devices and the jquery doesn’t work!!
    What might be the problem? I really need my site to fully work on mobile devices. Please help me!

    Thanks.

  25. Hello!
    I was checking previous comments and realized that someone already posted a solution for my problem (the hover effect not showing on mobile devices) but when I copy the code inside a script tag it doesn’t seem to work.
    What am I doing wrong?
    Please help!

    Thanks by the way for such an amazing jquery! It helped me sooo much.

  26. Hello!
    Automatic rotation might be possible? No need to put the mouse over the image. Thanks for your answer

  27. Excellent script. Just awesome demo..! Keep up the fantastic work..!

  28. Great tutorial! I just noticed that there is a “>” missing in your closing list tag () I’m referring to the HTML code.

    Keep up the good work!

  29. Is there any easy way to figure out the right dimensions for using a background image with text? or a way to center the image? Love the buttons but I can’t get the text to align properly.

  30. Is there a tutorial to describe how to change the size of the elements? Look great, thanks.