General Question

csshelp's avatar

How to magnify three links with CSS?

Asked by csshelp (1points) October 29th, 2007

i want to magnify three links on my site. Lets say they are
<a href=“”>Google</a>
<a href=“”>Yahoo</a>
<a href=“”>MSN</a>

All i want to do is that when the user hovers the mouse over lets say google, the “google” text size increases or magnifies. Any website with a tutorial would be helpful

Observing members: 0 Composing members: 0

9 Answers

sferik's avatar

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

<a href="" class="magnify">Google</a>
<a href="" class="magnify">Yahoo</a>
<a href="" class="magnify">MSN</a>

Then, define that class in CSS as follows:

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

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

segdeha's avatar

@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.

Vincentt's avatar

sferik, wouldn’t it be:

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

? 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.

sferik's avatar

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.

Vincentt's avatar

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 ;-)

mirza's avatar

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 ?

sferik's avatar

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.

Vincentt's avatar

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

sferik's avatar

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.

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther