How to stretch segment of image in html/css


Tags: html,css,image,animation,stretching

Problem :

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

enter image description here

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



Solution :

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.


    CSS Howto..

    Transition animation to show hidden content

    How can I remove frame like background in twentysixteen theme

    How can I align this?

    How to break up an HTML List using CSS Only

    How to center an element horizontally and vertically?

    How to repeat nth-child rules for an infinite sequence in CSS

    How to convert a xml element into url using css?

    how do you create tags like stackoverflow with text styling

    How to change the text color of the clicked row of table with css and jquery

    How to position text on bottom?

    How do i select all nodes and apply a css style to all of them, D3

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to make a background using CSS gradient with flat color?

    How to add part of css property value through scope in ng-style in angular

    Css Trick - How to align this div

    How do I adjust position of a text inside a Bootstrap panel with overriden max-height?

    HTML + CSS layout with bottom box showing all content, variable height top box with scroll

    How do I find space between lines in HTML?

    How to create a separated menu with logo in between

    How can I get a box shadow to start below a thick border?

    How to hide some text in the middle of a string with only css [duplicate]

    How can I get my rows 100% wide?

    How to make CSS Column Design quickly?

    How to use list tag in single line

    How to show hide divs INSIDE divs easily?

    Overlapping image in photoshop splice, how to float with CSS

    How to use css to style xhtml markup made only of divs like a table [closed]

    How do I achieve a hover over image effect?

    How to make the menu contents center aligned?

    How can I opt out of a CSS style on a case-by-case basis?