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:

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:

  • 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
Copyright 2006-2016 Dynamic Drive