Expand image to left and right on mouseover
I am trying to animate an image to Left and right on mouseover and on mouseout it will bring back to previous state.
For eg if the original width of the image is 120 px then on page load it will show 100 px and on mouseover it will Expand to left and right.So it will be 10px more to left and 10px more to right.
But now it is expanding only in right side. Please any suggestion would be great.
Just discovered that there is something called clip in css3?
Well, basically your code is correct. The animation looks like it would expand to the right, because the image is aligned left.
If you wrapped it up in a div and let that have centered align, it would look "good".
"Good" in quotation marks, because the image gets stretched. You'd better go with a solution which uses background-images. If you hold on a second, I might see what I can do.
Edit: Here we go again: http://jsfiddle.net/GVdmF/2/
- I split up your pictures in 3 parts: left.png, center.png and right.png.
- I added center.png to the div
- I added the pseudo-classes :before and :after, made them block elements and added height/widht and also the corresponding background-images left.png and right.png
Your JS pretty much stayed the same. Hope this helped.
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here