image by: cssglobe.com View Demo Download The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's...

image by: superdit.com See Demo at the bottom of the page. With the new features that CSS3 have creating a variety of button. In this example, radius of the border, padding the button, the height and width modified, it can look like a circle. And added the rotateX property that currently only supported in web kit browser, to make it...

One of the sweet effects made easy by JavaScript frameworks like MooTools and jQuery is animation. Here's a quick MooTools code snippet that shows how you can add animating a background image to any element on a page. The CSS #animate-area { background-image:url(clouds.png); background-position:0px 0px; background-repeat:repeat-x; } The...

image by manos.malihu.gr View Demo Download The idea behind the script was to create a floating navigation that follows the moving cursor throughout the page. The goal was to make the menu itself as minimal as possible with “discreet” float animation to avoid obtrusiveness and help usability. The end result features simple markup, two...

image by tympanus.net View Demo Download In the following tutorial we will create an asymmetrical image slider with a little twist: when sliding the pictures we will slightly rotate them and delay the sliding of each element. The unusual shape of the slider is created by some elements placement and the use of thick borders. We will...

This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website which displays a set of featured photos with a camera shutter effect. jquery.shutter.css <style> #container{ width:640px; height:400px; margin:0 auto; border:5px solid #fff; overflow:hidden; -moz-box-shadow:...

The post detailed how you could leverage CSS3's transformations and opacity properties, as well as the magical MooTools JavaScript framework, to create spinning, fading, animated icons. Due to popular request, I've duplicated the effect with another popular JavaScript toolkit: jQuery. The HTML <div style="padding:20px 0;position:relative;"> <div...