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

Question

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)

Answer 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/