Growing page elements


show more Growing page elements provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms show less
please wait ...

Growing page elements

For the most part, when folks talk about scaling, they are thinking of making things larger, and most of what gets scaled up are images. In this movie we are going to follow that well-beaten path, as I show you how to resize a series of images on hover. We will even toss in a box shadow for that extra 3D kick. Let's take a look at a before-and- after scenario, so you can get an idea of what we're trying to do. I have open in the browser here, the about.htm file from the Chapter 2/02_03/ about folder of the exercise files.

Right now, the four images are static, and if I move my mouse over them, nothing happens. That's fine for a nice fallback position. But let's make it a little snappier for more modern browsers, and let's switch to a final version of this. And when I hover over any of the images, they scale up 50% larger than what they were before. And when I move my mouse off the image, it scales back down to normal and the next image scales up, Hours of Fun. In this situation my ...

Growing page elements
Video duration: 6m 51s 2h 25m Intermediate

Viewers:

Growing page elements provides you with in-depth training on Web. Taught by Joseph Lowery as part of the CSS: Transitions and Transforms

Subject:
Web
Software:
CSS
Author:
please wait ...