Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Expand image to left and right on mouseover

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?

Problem courtesy of: user691146


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:

  • 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.

Solution courtesy of: Boris


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Expand image to left and right on mouseover


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription