Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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.

Problem Courtesy of: user1833554

Solution

They are using CSS3 for this, transform-attribute.

HTML


    

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!

Solution courtesy of: Kristoffer Lundberg

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×