How to make images “grow”

You know how sometimes you roll over images and they get bigger? Well that’s a totally doable thing! My website does it, and so can yours!

First, you can either copy this CSS code or you can go to http://designshack.net/articles/css/joshuajohnson-2/:

HTML:

<div class=”grow pic”>
<img src=”http://lorempixel.com/400/400/people/9&#8243; alt=”portrait”>
</div>

Then CSS:

/*GROW*/
.grow img {
  height: 300px;
  width: 300px;
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
.grow img:hover {
  width: 400px;
  height: 400px;
}
And then you can adjust the growth however you want. It’s a really fun tool to mess with, especially with you logos. Enjoy!
SJM
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s