Look Inside
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.
[browser type=”cfs-x”]Please note that the results from this tutorial will only works well in browsers that support CSS3 transitions like Chrome, Safari and Firefox.[/browser]
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!