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.
Answer
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.
More references:
www.web-expert.it/summer-lab/summer-lab.html
www.tutorials.jenkov.com/svg/g-element.html
www.tutorials.jenkov.com/svg/text-element.html#text-example
tutorials.jenkov.com/svg/clip-path.html
Attribution
Source : Link , Question Author : Christian Matthew , Answer Author : Yisela
