New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Transitioning the images with CSS

From: CSS: Transitions and Transforms

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.

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!

Show transcript

This video is part of

Image for CSS: Transitions and Transforms
CSS: Transitions and Transforms

26 video lessons · 13907 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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.