Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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:


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:

  • transition-property: The CSS property the transition should act on. Possible values are: none | all | <property>
  • transition-duration: Specifies how long the transition should take place for. Default is 0.
  • transition-timing-function Specifies the type of transition to apply. Possible values are: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)

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 1 of 2 pages  1 2 >

No Work ini IE bro....
Posted by Crew on 05/27, 11:18 PM
...that's cuz IE sucks.
Posted by MSSlayer on 05/28, 09:12 AM
film izle : i shared this page on facebook.. thanks
Posted by film izle on 05/29, 02:06 AM
Looks cool, but since we as developer have to see that any effect has to work in most of the major browsers, which includes IE too.

Still IE sucks.
Posted by Lakeside Techies on 05/29, 11:31 PM
What about IE9? Ist there any hope, that MS will support this with its IE9?
Posted by Paul on 05/31, 04:55 AM
great work...but still IE sucks...feel like i am in prison, when u cannot do nothing about this IE...
Posted by agon on 06/01, 02:44 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
Posted by Shiva on 06/01, 05:00 AM
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content.
Posted by make icons on 06/02, 10:26 PM
I agree with Shiva. If IE just shows the effect as static images then whats the problem.

A great example for browsers that love CSS3!!!
Posted by Free CSS Menus on 06/07, 02:36 PM
Excellent post on CSS3! Great source code and easy to follow. I love this idea!

Brisbane Web Design
Posted by Tony on 06/09, 06:39 PM

Comment Pages 1 of 2 pages  1 2 >

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