Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Image Growth
This is a slick trick to have a thumbnail image grow to full size when a user's cursor is placed on it. An obvious use is with an image gallery. You can fit a lot of thumbnails into a small space, and yet have a larger image open for each one without loading a new page. I used it on some of my product page in the last iteration of this site, showing thumbnails of software programs that grow to full size when the user wants a closer look.Try it out below, place your cursor on one of the thumbnails…
This is very easy to do, but first let me explain the concept then I’ll give you the code.
The “thumbnail” images are actually full-sized images. They are just coded to display smaller than their real size. When the cursor is placed on a thumbnail, the coding causes them to be displayed at full-sized.
The reason we do it that way is because the browser can make an image smaller with little loss of quality, but if it has to make an image bigger there is a much greater loss of quality (depending on how much bigger).
Because the thumbnails are coded to be smaller than they really are, when the image is made bigger by the browser it’s really just displaying the image at it’s regular size, and hence, in its original quality.
This is done with CSS, but I’ve included some vendor prefixes for older browsers.
Let’s take a look at the CSS code first:
img:hover.grow {
-webkit-transform: scale(4, 4);
-moz-transform: scale(4, 4);
-o-transform: scale(4, 4);
-ms-transform: scale(4, 4);
transform: scale(4, 4);
-webkit-transition: -webkit-transform .2s ease;
-moz-transition: -moz-transform .7s ease;
-o-transition: -o-transform .7s ease;
-ms-transition: -ms-transform .7s ease;
transition: transform .7s ease;}
Place that in an external style sheet. If you need help with that here's a style sheets tutorial that should help. Here’s what each line in that CSS code means:
Lines 2 through 5 are vendor codes for older browsers. Each one sets the behavior for a different browser. The behavior, in this case, is to scale the image. You could probably remove these lines without it affecting very many users.
Line 6 is the real CSS code. It’s coded last so browsers that understand the CSS code will act on it and ignore the vendor codes.
Notice this part in each line from 2 through 6: scale(4, 4);
That tells the browser how much to scale the image. The first number is the width, and the second is the height. The "4, 4" is telling the browser to display the image at four times the size (400%) it's originally displayed at.
You actually have to do bit of light math to set this up. For example, if your image is 512 pixels square, divide that by 4 to get a thumbnail size of 128 pixels. Then if the code to show the full-sized image when the cursor is on it is 4x4, the enlarged image will be 512 pixels (the real image size). Whatever numbers you use, you'll have to code that in each of the lines (2 through 6) so it's the same for each browser.
Lines 8 through 11 are the vendor codes for the CSS transition so this will work in older browsers. Of course, if a browser is too far out of date, none of this will work. In fact, a lot more than this won't work for those clinging to their old dinosaur browsers. It's nice to be inclusive, to a point—but if we worry about every last user we'd still be living in the text-only browser age.
Line 12 sets the transition for modern browsers. The transition property is transform, which is a change from one state to another. In this case, it's how long it takes the photo to grow to full size. The .7s part means it will take .7 seconds for the change of state to complete. Change that to any duration you like.
The ease part is the timing function. It's how the transition takes place. Here are the options and what they mean:
linear : The transition effect has the same speed from start to end.
ease : The transition effect starts slowly, speeds up, then ends slowly.
ease-in : The transition effect starts slowly and speeds up.
ease-out : The transition effect starts at normal speed and slows at the end.
ease-in-out : The transition starts and ends slowly, a little faster in the middle.
cubic-bezier(n,n,n,n) : Define your own values in the cubic-bezier function.
Each "n" is a numeric value from 0 to 1.
To give you an idea of how the keyword values compare to bezier values:
linear = cubic-bezier(0,0,1,1);
ease = cubic-bezier(0.25,0.1,0.25,1);
ease-in = cubic-bezier(0.42,0,1,1);
ease-out = cubic-bezier(0,0,0.58,1);
ease-in-out = bezier(0.42,0,0.58,1);
To set up an image to use that CSS code just add the class name to the image tag.
Of course you'd put the width and height in that code, and the alt text.
That's it for this tutorial! I hope it grew on you.
