I want to take a circle that has a blue border and a picture inside, and clip the picture so it fits inside the circle nicely. I’d prefer to use very small files, perhaps cut down in sprites.
Once I have the clipping mask (sort of like Photoshop), I want to add a hover css animation to it.
I have found the answer to my own question.
Here is a tutorial on the subject from coderwall.com. It is amazing and that type of styling and graphical work is just what I am talking about. You can do rich hovers and animations that are super light weight.
Here is their example
The technical parts of what is going on are:
With SVGs we can add a clipping path to change the shape of our images.
It uses the SVG element is used to group SVG shapes together.