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!