How to stretch segment of image in html/css

Question

I have an image that's a circle and when someone hovers over it, i want it to animate and elongate horizontally, but i want it to stretch only the center of the image while maintaining the curves on the left/right. so something like this

i apologize for my terrible paint skills. if this isn't possible with a simple css setting or something, are there any alternative ways to animate a circle into this?

thanks

Answer 1

You will use 3 images. One each for the sides, encompassing the curves, then a middle image that is only as wide as you need it to be. You will use these images as background images inside of their own divs, and the middle image you want to make it repeat-x for as big as you need it to be, both for before the animation, and when it transitions. Remember to set the width and height for each div or they will collapse, as they are technically empty. You also need to float your divs to the left and make sure there is no padding or margins or you will get gaps. Try this css:

#div1 {
   background-image:url(leftcurve.png);
   background-repeat:no-repeat;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;
 }
 #div2 {
   background-image:url(middle.png);
   background-repeat:repeat-x;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;
}
#div3 {
   background-image:url(rightcurve.png);
   background-repeat:no-repeat;
   width:15px;
   height:100px;
   float:left;
   padding:0;
   margin:0;

}

Then just call your divs in regular html. Using JQuery to animate is a great solution for animation as you get nice transitions. What you want to do is tell JQuery to only animate the middle div, on hover, by making the width change to whatever you need it to be, from, say 15px to 100px or whatever.

Answer 2

You could create the circle using css and rounded borders:

.circle {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

More info here: http://css-tricks.com/snippets/css/rounded-corners/

And use the jQuery Animate function to change the width of it upon hover: http://api.jquery.com/animate/