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: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

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:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

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

Feedback 131

Comments are closed.
  1. this is awesome !!
    thank you so much for sharing ….

    i tried to edit this sample but unable to change the background images of circles

    .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);
    }
    i put some different pics in images folder and changed the link name
    e.g

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

    but didnt get any change out there !!
    can you tell me why is that so??
    i will be very thankful to you

    Regards ,
    Elisa

    • Just rename your new images 19.jpg, 20.jpg, and 21.jpg and put them in the folder to replace the sample ones.

      You don’t have to change any link in the code if you do that.

      Bastien

  2. Amazing! I’m inspired. I don’t know how I have missed CSS transition. It’s time to dabble and create.

  3. Wow, un excelente tutorial, ocupe el ejemplo #7 para un trabajo que estoy realizando, hice cambios de class a id al ponerle las imágenes, cambie los tamaños y los estilos de la parte trasera, se ve genial; saludos desde México y muchas gracias por el conocimiento 😉

  4. This is really amazing! Such a pitty it doesn’t work at all in IE. I wanted to use this for a restaurant website, but I can’t just tell people “IE sucks, go get another browser”. Any ideas for a graceful fallback?

  5. did anyone have an example of the jquery to fix hover on ipad and iphone devices ?

  6. Hi,

    Thanks for the tut, really impressive animations. Was wondering did any one figure out a fallback for IOS devices and the hover issue?

    Thanks

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

  8. 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!!!!

  9. 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!

  10. 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!

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

  12. 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?