On webpages like the Animade portfolio, they're using an effect where, instead of using an animated GIF, they're using a video that plays when your mouse goes over it, and pauses when your mouse moves away. This play and pause effect is pretty simple to add into any site.

In this tutorial we look at how to build the image lazy loading effect used on the Teenage Engineering site. We'll start with a lo-res pixelated image before replacing it with the full-res version.

Pixelated Image Lazy Loading Effect as Seen on Teenage Engineering

Code

Today, we talk about how to add the graphic design technique of having text around the edges of your page. Using a quick rotation and setting the origin for the rotation, we can place text as we want it quickly and easily.

Playing and Pausing a Video on Hover

Pixelated Image Lazy Loading Effect as Seen on Teenage Engineering

How to Make Rotate Text in CSS

Related posts

Ask a Project Manager #7: How Do I Land My First Digital Project Management Role?

Why Learning React is a Really Great Idea

How Do You Grow a Creative Business?

Want more? Sign up for our newsletter for more articles, resources, and fresh inspiration