Campsite Coders

Learn CSS

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

CSS Transform Scale

CSS Transform:Scale - means "make bigger" or "make smaller"

transform:scale (Zoom In over Hover)

Look at the example below of an animation transform-scale.

How To Make Element Larger on Rollover

When you want to make an image larger or a group of text larger by rolling your mouse over it - this is called "Scaling" an image. To see this in action, roll your mouse over the green block of text below:

This is a div tag with text inside. If you hover over it, you will see it scale up. This is done using the CSS tranform:scale code. This gives the effect of what some people call ZOOMING IN.

HTML

html code example of images in the aside element

CSS

css code for selecting nested elements

Scaling Elements Larger on Rollover

NOTES

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, write "I scaled an image!".

Scaling HTML items can really make an impact on user's reactions. Play around with this animation option for at least 30 minutes before moving on.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved