Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Transitioning the images with CSS


From:

CSS: Transitions and Transforms

with Joseph Lowery

Video: Transitioning the images with CSS

The final piece of the puzzle is the CSS Transitions and Transform declarations that will give our gallery its pizzazz. I have open now the transitions.css file from the Chapter 5/05_04_css folder, and first, since we are working with 3D transforms, we need to establish the perspective in the outer wrapper, which in this case is the section tag with the class of container. So I will start right after my last declaration margin here and put in the webkit-perspective, and let's set that to 1000.
please wait ...
Watch the Online Video Course CSS: Transitions and Transforms
2h 25m Intermediate Jul 11, 2012

Viewers: in countries Watching now:

With robust and ever-increasing browser support, it is now possible to take advantage of expressive CSS3 capabilities across modern browsers. In this course, Joseph Lowery explores the possibilities of the new coding options, which animate well over 50 different properties automatically or interactively, and how they open the door to enhanced user experiences. This course covers the range from simple to complex transitions, including 2D and 3D transforms, and illustrates how transitions are expedited in various web authoring tools, as well as Dreamweaver. The course also contains a start-to-finish interactive slideshow project that allows you to practice and see the transitions and transforms immediately in action.

Topics include:
  • Understanding transition basics
  • Working with 2D and 3D transforms
  • Animating color changes
  • Fading objects
  • Changing the size of page elements and fonts
  • Transitioning multiple properties at the same time
  • Understanding keyframes and animations
  • Working in the z-index
  • Adding JavaScript interactivity
  • Crafting transitions in Dreamweaver
Subject:
Web
Software:
CSS
Author:
Joseph Lowery

Transitioning the images with CSS

The final piece of the puzzle is the CSS Transitions and Transform declarations that will give our gallery its pizzazz. I have open now the transitions.css file from the Chapter 5/05_04_css folder, and first, since we are working with 3D transforms, we need to establish the perspective in the outer wrapper, which in this case is the section tag with the class of container. So I will start right after my last declaration margin here and put in the webkit-perspective, and let's set that to 1000.

All right, we can copy this, and I am going to paste this in four times now and change our vendor prefixes. First, let's change the second entry from -webkit to -moz for our Mozilla. The third one we will change to -ms for Microsoft, and then we will change the fourth one to -o for Opera, and we will get rid of the last one altogether. Now we are ready to pass the 3D features onto the children of the container, and for that we will need to set the transform style property to preserve 3D for its containing element, which is the div with an ID of carousel.

I'll go after, position: absolute; here, and enter in the webkit-transform-style, and we want this to be set to preserve-3d. I'll copy the line, and again, lets' paste it in four times and change our vendor prefixes. All right. Let's set up our transitions next, but only if the JavaScript is up and running. So we want to target the carousel and the figure tag within the ready class.

So I am going to put that down at the bottom here, and create a new rule. So .ready space #carousel, and we will enter in the second selector. Again, .ready#carousel figure. All right, now we are going to transition the transform property, and of course, we'll use our vendor prefixes, and we have to make sure that the vendor prefix is the same for both the transition and the transform property. So let's start off with -webkit-transition and then -webkit-transform, and let's make this 1 second duration, and we will use the default for the timing functions, which is ease, by leaving that off.

Okay I am ready to copy this line and then again paste it four times, and let's change the vendor prefixes, being sure to change both the transition and the transform. All right, that's done. Now this next bit is a design choice, and it's a bit subtle, but I prefer to set up a zeroed out box shadow property that can grow with the transition on the images. Let me show you what I mean. We will create a new rule for the images within the figures that are within carousel, so let's enter in our box shadow property with the WebKit vendor prefix.

And instead of setting up an offset and a spread, we will just use zeros. 0 space, 0 space, 0 space and then the color which I am going to keep consistent, but you won't be able to see it, because all the other values are at 0. Okay, we can copy that line now and then again paste it four times and change your vendor prefixes. Next let's add in our transition for the image and rather than target one property, because we have multiple things going on now, let's use the keyword all, and we will set the duration for the transition to one second.

Time to copy that line, and then paste it in, four times. Change our vendor prefixes. Okay, we are getting close to the end. It's time to create the CSS rule for the image hover state that will scale up the image to twice its size and apply the box shadow. We will create the rule so that it only works on the front most image, that is the one with the class of showFig. The selector is #carousel space figure.showFig, im, image, or img:hover.

And let's start with the box-shadow first, and we will set the offsets to 3 pixels in both directions, and we will have its spread out five pixels and the color will be black. All right, we can copy that code line to our pasting and our vendor prefix substitution. Now we are ready to enter in our transform scale property. So -webkit-transform: scale, parenthesis, and we are going double the size of this, so enter in a 2 and a semicolon at the end. And we copy this and paste again four times.

I assure you, I'm just as sick of changing these things as you are, no doubt. Won't it be glorious when we get to the point where this will no longer be necessary. I'm looking forward to it, I'm sure you are too. All right, finally, let's set up a couple rules that we will need for the older browsers. Ones that do not support CSS 3D transforms. Here we will incorporate the Modernizr class, no CSS transforms 3D to hide what we don't want to show and only display that which we do.

So the rule for here starts with a selector .no- and then the property, that is not supported by those browsers. Which in this case is csstransforms3d and then #carousel figure. All right, let's do that one more time and apply it to just the toggle switch, so we can hide that toggle control. And I mentioned this would be a hide, so we will use the display property and set it to none. All right, so the last thing we want to do is when we are ready to show the figure, we will change the display:none to display block, and we will only apply that for a figure with a class of showFig.

So let's enter in our no csstransforms3d value again, I just copied it so I paste it again one more time, #carousel figure.showFig. So open and close our curly braces and enter in display:block. All right, let's save our file. Now there is one more thing I need to do before we preview this in the browser, and that's to link the CSS file, transitions.css, to our source code. So let's go up to open that file, to spotlight.htm in the Chapter 5/05_04 folder, and we will put this right after the link to main.css, so another link tag with an href=_css, and there is our helpful CSS folder pop up, put a folding/, and you can see one of two files there, we want transitions.css.

So I will select that and then enter in the rest of the code, rel="stylesheet" and media="screen, projection" just to be consistent. All right, we close off our link tag, save it, and now everything is done let's head on over to the browser. Now what you see before you is what happens before I Refresh the page, this is with all the raw HTML edit, but before the CSS and JavaScript has been integrated. So let me click Reload, and there's our carousel. I hover over the first image, pops open nicely.

See how the block shadow fades in and then fades out again, and let's go Previous this time just to check it out this way. Ah! Looks excellent! I really like this one here, so let's take a closer look at that, it's very nice. Now let's try out our Toggle axis. Very sweet and interesting! Now we go Next, and there's another image scaled up for you to examine. Well, it's working fine in Safari, a very modern browser. Let's take a look in a slightly older version of Firefox, and when I loaded into Firefox, I will scroll down to the middle, and there we see the basic image.

If I hover over it, it does scale up, because this version of Firefox does support that sort of scaling and transitions, and as you can see, it's just as smooth as in Safari. And now when I click Next, I can cycle through the images very easily, and it all works perfectly well. You will notice that also the Toggle axis button is now hidden in the upper right. All right, so excellent work! Let's head back to the Safari for one last look at our 3D carousel. That's up and running, complete with hover scaling, rotating axes, and graceful degradation.

Great work everybody!

There are currently no FAQs about CSS: Transitions and Transforms.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Transitions and Transforms.

Return to your organization's learning portal to continue training, or close this page.


OK

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.