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