How to create image curved using css or jquery (See picture)

问题

Do you know how to take an effect like this: Image

when hovering on the picture?

I keep searching css and jquery but still not reach what i need.

Please give me a solution to do this.

Thank you so much!

(Sorry about my english)

回答1:

You can use CSS border-radius property and apply it on hover, e.g. something like:

#img:hover {
    border-top-right-radius:50% 10%;
    border-top-left-radius:50% 10%;
    border-bottom-right-radius:50% 10%;
    border-bottom-left-radius:50% 10%
}

Demo: http://jsfiddle.net/r3KzP/1/

来源：https://stackoverflow.com/questions/19871728/how-to-create-image-curved-using-css-or-jquery-see-picture