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.

  • Hi, and welcome to GD. Please provide examples of the desired result. Are you talking about generating svg in web, or using illustrator only, creating images with pics and text? (if you upload images of examples and what you have tried, someone with enough rep will add these to your post for you).
    – benteh
    Commented Jan 19, 2014 at 12:41

4 Answers 4


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:






I am not sure if I understand your question entirely, but I am going to take a chance.

As far as I understand, you want circles with images (circular images) on a web page. The easiest way of achieving this, is to simply style the images, the div containers for the image. Here is the css for simply making a circle:

   .circle {
        width: 120px;
        height: 120px;
        border: 5px solid red;
        -moz-border-radius: 60px;
        -webkit-border-radius: 60px;
        border-radius: 60px;

This will give you this:

enter image description here

Then you can add a background image to this by adding:


This will give you this:

enter image description here

For a hover effect, you can make another div to wrap the previous:

.fade {
float: left;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;

.fade:hover {
    opacity: 0.5;

To see the entire code including the hover effect, see this JSfiddle

  • 1
    I know how to do this already. i am looking to create like a clipping scenario. Commented Jan 19, 2014 at 19:33
  • Wow I found it what I am looking for and it is Awesome!!! I will post the answer and show the example. Commented Jan 19, 2014 at 20:01

Not only is it possible but it's widely used. SVG is used for all kinds of symbols on a lot of sites, including font icons. For many of my clients, we use it for the menu "hamburger", facebook and twitter icons.

Google for this and you will find a multitude of examples of usage. For simple things, if you care to study the code, you can create them using any simple editor.

  • Thanks, I have updated my question so it is a little clearer for what I am trying to accomplish. Commented Jan 19, 2014 at 16:57

Not every browser supports svg, and there are differences also between on and other.

First ask your self if the additional amount of work and problems is worth the case. Then check this:




  • I have looked at both of these resources and have played around in the sandbox. But not the example of what I am asking. so say perhaps I will clean up my explanation a little. Thank you the answer was useful Commented Jan 19, 2014 at 16:53
  • Hi Mac. We try not to have link-=only answers in the site, because websites can go down or change addresses. Could you explain in your answer what those links say?
    – Yisela
    Commented Jan 19, 2014 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.