How to make each letter in word change on hover

Question

So lets say I have a the word "IamGreat" somewhere within a paragraph on my website, and I want it to change to "Good4you" on hover. However, instead of changing the whole word, I want it so that each letter changes individually. Hence if I hover over the letter "I" it will turn into the letter "G", the letter "r" will turn into the number "4" etc. The two words are the same length. If possible I would also like to change the css (font color, font varient etc.) of the letter which is being changed. Is there a way I can do this using jQuery or javascript?

Answer 1

span {
  font-size: 3em;
  position: relative;
}
span:after {
  position: absolute;
  content: attr(content);
  top: 0;
  left: 0;
  -webkit-transition: all 750ms;
  -moz-transition: all 750ms;
  -o-transition: all 750ms;
  transition: all 750ms;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
}
span:hover:after {
  -webkit-transform: skew(10deg, 25deg);
  -ms-transform: skew(10deg, 25deg);
  transform: skew(10deg, 25deg);
}

<span content="H">H</span>
<span content="o">o</span>
<span content="v">v</span>
<span content="e">e</span>
<span content="r">r</span>