Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
    
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 Jan 19 at 12:41

4 Answers 4

up vote 2 down vote accepted

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

share|improve this answer
    
    
Glad you found the solution. –  Benteh Jan 19 at 20:44
    
I added your links to your answer for practical reasons. You can also accept your own answer as the solution: click the green tick-button to do so. It is good for future reference. –  Benteh Jan 19 at 20:54

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.

share|improve this answer
    
Thanks, I have updated my question so it is a little clearer for what I am trying to accomplish. –  Christian Matthew Jan 19 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:

http://www.w3schools.com/svg/svg_examples.asp

http://css-tricks.com/using-svg/

regards

share|improve this answer
    
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 –  Christian Matthew Jan 19 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 Jan 19 at 20:41

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:

background-image:url('http://i.stack.imgur.com/UEJFV.gif?s=128&g=1?s=128&g=1');
background-position:center; 

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

share|improve this answer
    
I know how to do this already. i am looking to create like a clipping scenario. –  Christian Matthew Jan 19 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. –  Christian Matthew Jan 19 at 20:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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