Mouse over zoom up effect on individual letters of text

Question

Would it be possible to create an effect on a webpage with css/Javascript/jquery etc. which allows users to mouse over individual letters of a text and highlight each individual letter at a time, this is in order to create a kind of 'zoom up' effect. Ideally displaying a little magnifier over each letter would be nice but not that important.

What I am trying to achieve is changing the style of each individual letter as you mouse over them, the text is not necessarily a link, it is also not dynamic meaning there is a static paragraph of text and I would like to apply this effect to each letter in it.

Any help is appreciated.

Thanks.

Answer 1

You can try the zoomooz plugin.

Alternative, you can wrap each letter with a span element and then animate them:

$("selector").hover(function(){
   $(this).animate({fontSize: "22"}, 300);
}, function() {
  $(this).animate({fontSize: "16"}, 300);  
})

DEMO

Answer 2

Or you could do this: http://jsfiddle.net/FPKAP/11/

Zoom effect, hope this helps :)

code

$('#zoomimg').mouseenter(function()
       {

          $(this).css("cursor","pointer");
           $(this).animate({width: "50%", height: "50%"}, 'slow');


       });

    $('#zoomimg').mouseleave(function()
      {   
          $(this).animate({width: "28%"}, 'slow');
   });

Answer 3

I'm merely playing with the idea here, I'm not taking the efficency into account, that will be up to you. But if I understood you correctly wouldn't just giving each and every letter a < span > tag and then playing with the :hover effect or using jquery/javascript hover effects to do what you want as you move your mouse over the letters? If you don't want to manually insert all the span tags you could use regular expressions to do that for you.

Answer 4

Not as good solution as listed above, but here's how you could achieve a zoom effect with CSS3.

Here's an example (jsFiddle) and here's the code:

Html

<h1>
<span>A</span>
<span>B</span>
<span>C</span>
</h1>

CSS

h1 {
    font-family: Arial;
    font-size: 62px;
    color: #000000;
}

h1 span { 
    display: inline-block;
    -webkit-transition: all 0.1s ease-out;
}

h1 span:hover {
    -webkit-transform: scale(2.0);
    cursor: pointer;
}

​