Please help me do this effect in my web (CSS or JQuery)

Question

I doing a web and I want create a effect like it in this website : http://y2graphic.com/

In this web, you can see the section named "Chủ đề HOT" (Hot contents) , it has 3 images, when hover it creates a effect (I don't know name). Can you tell me name of effect and the method to create it ? Thanks very much and sorry for my bad English.

Answer 1

They are using CSS3 for this, transform-attribute.

HTML

<a href="#" class="thumb">
    <img src="http://y2graphic.com/templates/v2/images/hot/wallpaper.jpg" />
</a>

CSS

.thumb {
    display: block;
    height: 125px;
    overflow: hidden;
    position: relative;
    width: 150px;   
}

.thumb img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 0.5s ease 0s;
    width: 100%;
    z-index: -1;
}

.thumb:hover img {
    transform: scale(1.2) rotate(5deg);
}

Here is a fiddle that demonstrates the above code!

Answer 2

HTML

<a href="#">
    <img src="http://images.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" />
</a>

CSS:

a {
    width: 150px;
    height: 125px;
    display: block;
    overflow: hidden;
    position: relative;
}

a img {
    width: 100%;
    height: 100%;
    -moz-transition: -moz-transform 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease;
    -o-transition: -o-transform 0.5s ease;
    transition: transform 0.5s ease;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
}

a:hover img {
    -moz-transform: scale(1.2) rotate(5deg);
    -webkit-transform: scale(1.2) rotate(5deg);
    -o-transform: scale(1.2) rotate(5deg);
    transform: scale(1.2) rotate(5deg);
}

Fiddle: http://jsfiddle.net/kD2v8/