CODEWITHSUNDEEP
javascriptjquerycsshtml
03Usr
03Usr

Reputation: 3435

Mouse over zoom up effect on individual letters of text

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.

Upvotes: 4

Views: 8911

Answers (4)

Ram
Ram

Reputation: 144689

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

Upvotes: 6

Christofer Vilander
Christofer Vilander

Reputation: 18022

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

​

Upvotes: 3

Christer William Persson
Christer William Persson

Reputation: 763

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.

Upvotes: 4

Tats_innit
Tats_innit

Reputation: 34107

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

Upvotes: 3

Related Questions