CSS3 for Web Designers by Dan Cederholm

Author:Dan Cederholm [Cederholm, Dan]
Language: eng
Format: epub, mobi, pdf
Tags: COMPUTERS / Programming Languages / HTML, COMPUTERS / Web / Site Design
ISBN: 9780984442539
Publisher: A Book Apart
Published: 2010-11-13T16:00:00+00:00

Lastly, adding a transition to the linked photos will smooth out the scaling, giving the :hover treatment an animated zoom-in-and-out—an effect previously only possible with Flash or JavaScript, but now possible in many browsers with just the few lines of CSS3.

Here’s the transition stack added to the complete CSS for our little photo gallery:

ul.gallery li { float: left; margin: 0 10px; padding: 10px; border: 1px solid #ddd; list-style: none; } ul.gallery li a img { float: left; width: 200px; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; } ul.gallery li a:hover img { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5); }

Notice this time, the property we’re transitioning is the scale transform, hence the appropriate vendor prefixes are in place for both the transition and transform properties.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.