Fancy CSS3 Transition Hover Effects

Fancy Hover Effects with CSS3 Transitions

Written by Kenny on April 14, 2012 CSS3
This tutorial shown you the way to create fancy hover effects on thumbnails using CSS3 transitions together with CSS :hover pseudo-class.

Fancy Hover Effects with CSS3 Transitions

Fancy CSS3 Transition Hover Effects

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.

Please note that the results from this tutorial will only works well in browsers that support CSS3 transitions like Chrome, Safari and Firefox.

 

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


» This Might Interest You «

User Feedbacks (8) Share Your!

  • Hai, its rocking, I really like this…. thanks

    1 month ago! Reply
  • how to add this effect in blogger images please anyone can help me ?

    2 years ago! Reply
  • mohamed

    hi
    please any tell me how to add this fanction in blogger
    thank you all

    2 years ago! Reply
  • Hey just wanna say thanks, these are really good and i would disagree about them being over the top, people these days want little things tht makes there site a little different and this is one way of doing that.

    I made good use of your scripts on this site im developing. http://diywpblog.com/newtheme/

    There is just one thing though,

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#e2efff’,GradientType=1 );

    this is obsolete and will result in the background of the images not displaying correctly, I have a blue back ground, but it displayed a white background around the social media icons, but removing that filter resolves that issue..

    Regards

    Matthew

    2 years ago! Reply
    • I just realised we have the same footer too, seems to be a nice color.

      2 years ago! Reply
  • One of the best CSS3 tutorials out there! Thanks for sharing the tutorials :)

    2 years ago! Reply
  • FionnT

    While I really like them, I do think they are a tad bit over the top.

    2 years ago! Reply

Leave a Feedback

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>