Zoom effect on text/words on mouseover

Question

I can't find a solution to my problem elsewhere so, here it is:

The fuctionality i want is, when a user hovers the mouse over a set of 3-4 words, it gets zoomed. So far I only managed to do this hardcoded, I mean that I splited all the text with span elements and added fuctionality in css. But I know this is bad:

1. Gets messy/looks ugly
2. Can't do this at huge text's
3. It's hard to add more text

So I want a way to do this "span separate text" automatically, maybe with regular expressions. But I don't know how. Here it is what i came up so far

 body { padding: 10px; margin: 10px; } h1 { font-family: Arial; font-size: 20px; color: #000000; } h1 span { display: inline-block; -webkit-transition: all 0.1s ease-out; } h1 span:hover { -webkit-transform: scale(1.5); color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; cursor: pointer; } 

 <h1> <p>Yesterday i went out at a festival where i ate a lot of corn</p> <!--I just split the text with span elements. --> <p><span>Yesterday i went</span> <span>out at a festival</span> <span>where i ate</span> <span>a lot of corn</span></p> </h1> 

Answer 1

I don't really know about the zoom, but If you want to split your text into groups of 3 words to wrap them with a , you could use jquery and do something like:

var p = $('p'); //selector
var originalText = p.text().split(' '); //original text between <p></p>
var spannedText = [];

for (var i = 0; i < originalText.length; i += 3) { //per group of 3 words
 spannedText[i] = ('<span>' + originalText.slice(i,i+3).join(' ') + '</span>'); //wrap the 3 words with <span></span>
}

$(p).html(spannedText.join(' ')); //display the new wrapped text

https://jsfiddle.net/hjmoc1mq/3/