CSS3 Scaling

  • follow us in feedly
Published March 16, 2013 by Brad Knutson
CSS Scaling

Scaling elements in CSS is a common practice today. You’ll often times see an image, chunk of text, or entire div increase in size on mouse-over.

Until the rise of HTML5 and CSS3 you could accomplish increasing the size of an element by modifying properties tied to the :hover selector.

Old Example

Default Size: 18px Hover: 32px

CSS

.old-example {
	font-size: 18px;
}
.old-example:hover {
	font-size: 32px;
}

The problem with this, as you may have noticed, is that increasing the font size on hover manipulates the page and literally moves the position of everything that appears in the DOM after the selected element. There has to be a better way to scale an element, right?

There is, and this is where CSS3 comes to save the day again.

Lets check out the same example, with a CSS3 twist. Here, we’ll utilize transform: scale() property.

New Example

Default Size: 18px Hover: scale(1.2)

CSS

.new-example {
	font-size: 18px;
	text-align: center
}
.new-example:hover {
	transform: scale(1.2);
}

The reason we have to center this text, is because if we have it set to default text-align: left the text will scale and actually go off the side of the div (which on this site I have set to overflow: hidden.

But the important part, as you may have noticed, is that scaling the element doesn’t effect any other elements positions in the DOM.

Advanced Example

Lets take this up a notch, by adding in more elements and CSS.

Gold Class

Price: $500.00 per month

Silver Class

Price: $50.00 per month

Bronze Class

Price: Free!

HTML


<div class="pricing-container">
<div class="pricing-block">
<h3 class="pricing-gold">Gold Class</h3>
<div class="pricing-level">
			<img src="http://bradsknutson.com/wp-content/uploads/2013/02/chrome.png">
		</div>
		Price: $500.00 per month
	</div>
<div class="pricing-block">
<h3 class="pricing-silver">Silver Class</h3>
<div class="pricing-level">
			<img src="http://bradsknutson.com/wp-content/uploads/2013/02/safari.png">
		</div>
		Price: $50.00 per month
	</div>
<div class="pricing-block">
<h3 class="pricing-bronze">Bronze Class</h3>
<div class="pricing-level">
			<img src="http://bradsknutson.com/wp-content/uploads/2013/02/firefox.png">
		</div>
		Price: Free!
	</div>
</div>

CSS

.pricing-container {
	width: 100%;
	box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
	border: 1px solid #EFEFEF;
}
.pricing-block {
	width: 30.5%;
	padding: 1%;
	text-align: center;
	display: inline-block;
	border-right: 1px solid #EFEFEF;
	transition: all 0.3s ease 0s;
	-webkit-transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
}
.pricing-block:hover {
	box-shadow: 0px 0px 4px 1px rgb(0,0,0);
	border-radius: 10px;
	background-color: #EFEFEF;
	transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}
.pricing-block:last-child {
	border: none;
}
.pricing-level {
	margin: auto;
}
.pricing-level img {
	width: 100%;
	box-shadow: none !important;
}

This “advanced” example is still just barely scratching the surface of what CSS3 scaling and transitions are capable of. I would like to go over some more impressive examples at a later date, but this is what I have for you today!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">