How to Dynamically Shape Any Image on Your Website

Share this post!

Vote this!

The round thumbnail is really just one transparent PNG image overlaying each thumbnail in the gallery. You typically see PNG images used as subtle shadows or image borders, but with Roundfolio we took it a step further and created a full transparent mask to change the shape of the thumbs. Let’s take a closer look at how this is done, and a bit of HTML/CSS to make it all work.

See the example below to understand the visual hierarchy.

More...