How to code smart text effects with CSS

Image: Middle Child
[Image: Middle Child]

Rollover links are a great way to grab a user's attention, especially if they do something unusual or original. Middle Child has a great effect, seldom seen elsewhere, that captures each letter and splits them apart with animation, which kicks in when the visitor hovers over the word. The animation helps convey the sandwich brand's playful character. 

In this article, we show you how to recreate the effect on your site. For more inspiration, take a look at our guide to the best CSS animation examples (with instructions on how to code them). For something a bit different, try a top website builder or our pick of the best cloud storage. And if you're making your site more complex, make sure your web hosting is on point. 

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Web Designer staff

Web Designer is the premier magazine for aspiring online creatives and industry professionals. The monthly title offers cutting-edge practical projects spanning XHTML, CSS, Flash and WordPress as well as hosting features and interviews with the web community’s most influential people. Each issue also has a dedicated Industry section covering news and views from the trade, website showcases featuring the finest design talent and a free CD of valuable resources.