Fancy Hover Effects with CSS3 Transitions

Fancy Hover Effects with CSS3 Transitions

In today’s tutorial we’re going to create some simple but fancy hover effects on thumbnails using CSS only. The techniques that involved are CSS3 Transitions together with the :hover pseudo-class, and other CSS properties for styling as well.

The Idea

The idea is to create a fancy circular thumbnail which will be animated when it is hovered.

The Basic Markup

Please note that the following markup will be based on DEMO1, of course, you can still find out the markup for other demo inside the source files.

First, we will create our thumbnails with caption by using HTML5 figure tag. Two div elements will be added to each thumbnail for decoration purpose.

<div class="imgholder">
	<div class="outer1 circle"></div>
	<div class="outer2 circle"></div>
	<figure>
		<img src="images/img1.jpg" />
		<figcaption class="caption">Image1</figcaption>
	</figure>
</div>
<div class="imgholder">
	<div class="outer1 circle"></div>
	<div class="outer2 circle"></div>
	<figure>
		<img src="images/img2.jpg" />
		<figcaption class="caption">Image2</figcaption>
	</figure>
</div>
/*other thumbnails*/

The Basic CSS

The first thing about CSS is to define some basic CSS properties and the dimension of thumbnails. We can create a circular thumbnail through CSS3 border-radius.

.imgholder
{
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 100px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
/* thumbnails css */
.imgholder img
{
	position: absolute;
	left: 0;
	top: 0;
	width: 120px;
	height: 120px;
	border-radius: 100px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	z-index: 5;
}
.imgholder figcaption
{
	position: absolute;
	left: 0;
	top: 120%;
	width: 120px;
	color: #004E87;
	text-shadow: -1px -1px 0 #fff;
	z-index: 4;
}
/* decoration css */
.imgholder .circle
{
	position: absolute;
	width:120px;
	height:120px;
	border-radius: 100px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

The Fancy Hover Effects

So now, we’ll going to add fancy effect on these thumbnails when they are hovered. First, let’s make our thumbnails translucent and display only when hovered.

.imgholder img
{
	opacity: 0.5;
	transition:
		opacity 0.7s ease-out 0.3s;
	-moz-transition:
		opacity 0.7s ease-out 0.3s;
	-webkit-transition:
		opacity 0.7s ease-out 0.3s;
}
.imgholder:hover img
{
	opacity: 1;
}

Next, let’s style our first decoration div element. We will use this element to create background and border for thumbnail.

.imgholder .outer1
{
	top: -8px;
	left: -8px;
	z-index: 2;
	border: 8px solid;
	border-color: #DEEBFC;
	box-shadow: 0 0 3px #AFD3FF;
	-moz-box-shadow: 0 0 3px #AFD3FF;
	-webkit-box-shadow: 0 0 3px #AFD3FF;
	background: #ffffff;
	background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
	transition:
		box-shadow 1s ease-out,
		border-color 1s;
	-moz-transition:
		-moz-box-shadow 1s ease-out,
		border-color 1s;
	-webkit-transition:
		-webkit-box-shadow 1s ease-out,
		border-color 1s;
}
.imgholder:hover .outer1
{
	border-color: #0088EA;
	box-shadow: 0 0 10px #0285E2;
	-moz-box-shadow: 0 0 10px #0285E2;
	-webkit-box-shadow: 0 0 10px #0285E2;
}

The next decoration div element will be used to make an outer border for thumbnail.

.imgholder .outer2
{
	top: -18px;
	left: -18px;
	width: 136px;
	height: 136px;
	z-index: 1;
	border: 10px solid;
	border-color: #9BC8FF;
	box-shadow: 0 0 3px #8EB9FF;
	-moz-box-shadow: 0 0 3px #8EB9FF;
	-webkit-box-shadow: 0 0 3px #8EB9FF;
	opacity: 0;
	transition:
		opacity 0.7s ease-out 0.3s,
		box-shadow 0.7s ease-out 0.3s;
	-moz-transition:
		opacity 0.7s ease-out 0.3s,
		-moz-box-shadow 0.7s ease-out 0.3s;
	-webkit-transition:
		opacity 0.7s ease-out 0.3s,
		-webkit-box-shadow 0.7s ease-out 0.3s;
}
.imgholder:hover .outer2
{
	opacity: 1;
	box-shadow: 0 0 20px #8EB9FF;
	-moz-box-shadow: 0 0 20px #8EB9FF;
	-webkit-box-shadow: 0 0 20px #8EB9FF;
}

Enjoy!

That’s all for fancy hover effects in DEMO1. To have more attractive hover animation, try using CSS3 transform properties as decoration like what I did in DEMO2 and DEMO3.

If you’re interested this, you might check out my other CSS3 Transitions tutorial as well.

#Fancy Image Gallery using CSS3 Transitions

Have fun with CSS3 transitions!

View Demo Download Source