How to magnify three links with CSS?

I would first assign a CSS class—let’s call it magnify—to all of the links, like so:

<a href="http://www.google.com" class="magnify">Google</a>
<a href="http://www.yahoo.com" class="magnify">Yahoo</a>
<a href="http://www.msn.com" class="magnify">MSN</a>

Then, define that class in CSS as follows:

<style type="text/css">
a:hover.magnify  {
  font-size: 1.2em;
}
</style>

Change the value of the font-size property to increase or decrease the amount of magnification.

@sferik, I’m too slow! You’re getting to all the web dev questions before me! :-)

I guess I could play devil’s advocate and ask why you’d want to do such a thing? Generally, shifting the ground under the user’s mouse is considered bad usability.

sferik, wouldn’t it be:

<style type=“text/css”>
a.magnify:hover {
font-size: 1.2em;
}
</style>

? Or doesn’t it matter?

Though I agree with degdeha – it’s not a great idea. Perhaps just changing the (background-)colour would be enough.

Vincentt, the way you define the class, magnify applies to anchors. While this certainly will work, I have constrained the scope of the class to anchor hovers.

I also agree that magnifying on hover is generally a bad idea, but that’s probably not the answer that csshelp was looking for.

Hmm… So the difference is that your way “applies to all hovered elements that are of class magnify”, while mine “applies to all elements of class magnify that are hovered”. Am I right?

And as for the bad idea, sure, just pointing it out and supplying an alternative ;-)

Since we ware talking about CSS,
does it make a difference if you read CSS from an external file .css file or have it in your <text/css> section ?

By linking to an external CSS file, you get the advantage of browser-level caching, which can significantly speed up page rendering if the same CSS is used across multiple pages.

On the other hand, an external CSS file is an extra HTTP request.

That’s true. Ideally all header requests (for CSS files, JavaScript files, etc.) should be bundled into a single compressed file to minimize HTTP overhead while maximizing browser-cacheability.

There are also a number of code-management advantages of keeping your CSS in an external file.