Zoom!

I thought this was pretty cool. I made this style of text for a free wordpress theme I’m working on, that I’ll hopefully be able to give you guys soon! The idea was pretty simple. I just wanted some text that would zoom out when you hovered over it. Then you could click down on it to push it ‘in’.

The Idea!

It’s very easy to do, you shouldn’t find it too challenging. I decided to use multiple text shadows in a gradient of colors. You don’t have to be exact, and I quite liked the layered effect. So all we gotta do is set a small text shadow for the initial state, which then becomes bigger on hovering, and then disappears. We also want to keep the text in a constant position, so we’ll just use position: relative;.

I wanted to use transitions so it smoothly zoomed out, but webkit seemed to be the only browser that supported it properly, so I only used the webkit transition tag (Sorry guys!). It’ll work fine in the latest version of all other browsers anyway.

#text {
	font-family: 'Myriad Pro', Helvetica, Arial sans-serif;
	font-size: 8em;
	width: 100%;
	text-align: center;
	margin: 120px 0;
}

#text a {
	text-decoration: none;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 2px 0 #721e1e, 0px 2px 5px rgba(0,0,0,0.5);
	position: relative;
	-webkit-transition: all 0.1s ease-in;
}

#text a:hover {
	text-shadow: 0 2px 0 #d84f4f, 0 4px 0 #d54646, 0 6px 0 #ce3333, 0 8px 0 #b92e2e, 0 10px 0 #912525, 0 12px 0 #721e1e, 0px 12px 10px rgba(0,0,0,0.5);
	top: -12px;
}


#text a:active {
	text-shadow: none;
	bottom: 0;
	text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
}

Notice the numerous text shadows? I used different colours for each, but you could very easily pick your own, or just use the same one for all. If you only use one shadow you won’t create the illusion of depth.

To finish off, the HTML is just some text in a div!

<div id="text">
	<a href="#">SOME ZOOM TEXT</a>
</div>

And that’s it! Check out the demo and download! Thanks for reading.