Search code examples
jquerycsswebjquery-effects

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

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.

Solution

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