I want to achieve this effect with a block of text, where each letter changes to either another font or icon on mouse-hover. I was unable to find the right terms to look up what something like this could be called. The link to the page is below. Once you hover on the text you will be able to see the effect;
3
Answers
You would have to create a wrapper for each letter, and then use JavaScript to control the hover effect, or you could use CSS pseudo-elements.
Here is how to do it using CSS ( My preferred way ):
First, the html:
Now, the CSS:
Change the
data-hoverto the desired hover value!If you want to change the font, here is how:
You can change a font in js by
document.getElementById('id').style.fontFamily = "fontname";Or just CSS:
element {font-family: name;} element:hover {font-family: new-name;}The source code of the font changing of your example site is here btw: http://www.other-studio.com/assets/bundle.js?v=1.2.7
Not too difficult.
I was able to replicate something similar to the example with some simple JavaScript.
Note:
You can insert any characters you want as a possible replacement for the original into the replacement symbols array.