Understanding Hover Craft

A coding conundrum that caused me particular consternation was enlarging an image when hovering over it. I figured this would be a good idea for the four MPW documents, so people could better read them individually if they wanted.

I went on a CSS-help website to discover how one would pull this off, and it said the following code would work: “transform: scale(2,2); origin 0 0;

And it did appear to work, but only in Google Chrome and Mozilla Firefox; not in Safari. A bunch of trial-and-error tweaks later, I still couldn’t solve the problem. What I needed to do was code it for each browser individually. My code now looks like this (and it works everywhere!)

.Doc:hover {
transform: scale(2,2);
-webkit-transform: scale(2,2);
-webkit-transform-origin 0 0;
–moz–transform: scale(2,2); transform-origin; -webkit-transform-origin; –moz–transform-origin; –ms–transform-origin

Here’s what it looks like, pre- and post-hover…



One thought on “Understanding Hover Craft

  1. I thought this was super helpful! And applicable to me (and probably a lot of others in the class) moving forward on their sites on this project or on others. I am glad you figured it out!


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s