Mouse over the effect of the increase in individual letters of the text

Question

Is it possible to create an effect on a web page using css / Javascript / jquery, etc., which allows users to hover over individual letters of the text and select each individual letter at a time, this is to create the appearance of the effect of "increase". An ideal display of a small magnifier over each letter would be nice, but not so important.

What I'm trying to achieve is to change the style of each individual letter, when you hover over them, the text is not necessarily a link, it is also not a dynamic value, since there is a static paragraph of text, and I would like to apply this effect to each letter in him.

Any help is appreciated.

Thanks.

Answer 1

You can try the zoomooz plugin.

Alternatively, you can wrap each letter with a span 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 it: 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 just play with the idea here, I do not take into account the effectiveness, which will depend on you. But if I realized that you wouldn’t just give each letter correctly, span> and then play with the effect: hover or using jQuery / javascript hover effects to do what you want when you mouse over letters? If you do not want to manually insert all span tags, you can use regular expressions to do this.

Answer 4

Not as good as stated above, but here, how you could achieve a zoom effect with CSS3.

Here's an example (jsFiddle) and here is 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; }