Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Image CSS: Here

Image Bubbles using CSS3 transform and transitions

Author: Dynamic Drive

CSS3's transform and transition properties make it possible to manipulate elements in a variety of ways using just CSS. CSS transform is used to scale, rotate, or even skew an element without disturbing the content around it, while transition is used to animate CSS properties into view. The two properties are supported in modern versions of Safari, Chrome, Mozilla 3.5+, and Opera 9.5+ in varying degrees. With that brief introduction out of the way, the following uses CSS3's transform and transition properties to "bloat up" an image when the mouse rolls over it, and return it to its original state when rolled out of:

The CSS:

The HTML:

In FF3.5, each image simply enlarges without any animation, while in Safari, Chrome, and Opera9.5+, it is done gradually. Notice how the content surrounding the image in question is not disturbed when it is enlarged, an important advantage of CSS transform versus simply increasing the size of the image.

CSS3 Transform Scale is used to enlarge each image when the mouse rolls over it by a factor of 1.8x:

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x in FF3.5+*/
-webkit-transform:scale(1.8); /*Safari and Chrome version*/
-o-transform:scale(1.8); /*Opera 9.5+ version*/
}

As with most CSS3 properties, current browsers have chosen to support the transform property by way of a vendor specific CSS equivalent. The above 3 correspond to that in FF3.5+, Safari/Chrome, and Opera 9.5+ Note that they are defined inside the img:hover selector, which causes the image to scale up when the mouse moves over the image.

CSS3 Transitions is used to apply a transition to a CSS property, so the property gradually transitions into view when applied to an element, instead of immediately. Here we apply CSS transitions to the CSS transform property, so the scaling of the image is gradual:

.bubblewrap li img{
"
"
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

The above uses the transition shorthand property to specify the CSS property to transition, the duration of the effect, plus the type of effect all at once:

Just like the transform property, vendor specific equivalents for the transition property are used here. The property that's conspicuously missing is that for Firefox. While Firefox promises support for the transition property in Firefox 4.0, even then it notes that transitions won't work on the transform property. Check CSS Transitions documentation for more info and the latest changes.

It's worth mentioning where we've defined the transition property above- inside the img selector itself, and not img:hover. The former causes the transition to play both when the image is enlarged and when it returns to its original dimensions. If the transition property was inserted inside img:hover instead, the transition would only play during the enlarging of the image. We want it on both ends here.

Some useful resources:

Code Info

Rate this code:

Date Posted: 05/27/2010

Revision History: None

Usage Terms: Click here

Your Comments (14)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 2 pages  <  1 2

Well done! Thank you very much for professional templates and community edition
Posted by sesli sohbet on 06/15, 02:54 AM
Whats the problem? IE just shows the effects here as a static image and real browsers show the effects.

Of course IE sucks, but that shouldn't stop you from using these effects as long as content doesn't reply on the effects
sesli sohbet
Posted by magic100 on 06/15, 03:00 AM
The former causes the transition to play both when the image is enlarged and when it returns to its original dimensions.
Posted by air jordan shoes on 06/17, 05:54 AM
How do you actually make this script add your site to facebook i mean as a status update.
Posted by Godzilla101 on 06/20, 08:46 AM

Comment Pages 2 of 2 pages  <  1 2


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.