3D Image Hover Effects with CSS3 and jQuery

In this tutorial we read about how to create 3D image hover effects with CSS 3D transforms and jQuery.
We can create 3D image hover effects like Google SketchUp Showcase using CSS and jQuery very easily.

Find below link for working demo.

jQuery functions for slice effect:

$.fn.hoverfold = function( args ) {
    this.each( function() {
        $( this ).children( '.view' ).each( function() {
          var $item   = $( this ),
             img     = $item.children( 'img' ).attr( 'src' ),
             struct  = '<div class="slice s1">';
             struct  +='<div class="slice s2">';
             struct  +='<div class="slice s3">';
             struct  +='<div class="slice s4">';
             struct  +='<div class="slice s5">';
             struct  +='</div>';
             struct  +='</div>';
             struct  +='</div>';
             struct  +='</div>';
             struct  +='</div>';
             var $struct = $( struct );
            $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $(             '' ) );
        } );
    });
};

CSS & HTML code available in Source File.

Note: The result of this tutorial will only work in modern browsers that support the respective CSS properties.

Originally developed by Mary Lou.

Image used in the demo are by Angelo González and it is licensed under the Creative Commons Attribution 2.0 Generic (CC BY 2.0) License.

View Demo  Download Source