Skip to main content

3D Hover Effects

Now we are going to show you all new 3D hover effects using css. Its too impressive and this amazing hover effects are inspired from Google SketchUp Showcase.In this tutorial we had explained the hover effects of css on images. When you take mouse pointer on them they get bended or change their shape.
For example: As in facebook you can see likes of each photo by using transformation css you can see their like when hover effect is applying on the image.Sounds tricky, just download and watch the effects. You can use this effect on your website.
This tutorial includes magic of css, jquery and little html code.

Download Code

Jquery:



( function( $ ) {
 
 $.fn.hoverfold = function( args ) {

  this.each( function() {
  
   $( this ).children( '.view' ).each( function() {
   
    var $item  = $( this ),
     img  = $item.children( 'img' ).attr( 'src' ),
     struct = '
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; struct +='
'; var $struct = $( struct ); $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '' ) ); } ); }); }; } )( jQuery );

Image:


Css Magic:

This is the css about the view of  image.

.view {
 width: 316px;
 height: 216px;
 margin: 10px;
 float: left;
 position: relative;
 border: 8px solid #fff;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 background: #333;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -o-perspective: 500px;
 -ms-perspective: 500px;
 perspective: 500px;
}
After that the main css is given below about slice view of image which is the best part.
.view .slice{
 width: 60px;
 height: 100%;
 z-index: 100;
 
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 
 -webkit-transform-origin: left center;
 -moz-transform-origin: left center;
 -o-transform-origin: left center;
 -ms-transform-origin: left center;
 transform-origin: left center;
 
 -webkit-transition: -webkit-transform 150ms ease-in-out;
 -moz-transition: -moz-transform 150ms ease-in-out;
 -o-transition: -o-transform 150ms ease-in-out;
 -ms-transition: -ms-transform 150ms ease-in-out;
 transition: transform 150ms ease-in-out;
  
}
Css of back view of image and their links:
.view div.view-back{
 width: 50%;
 height: 100%;
 position: absolute;
 right: 0;
 background: #666;
 z-index: 0;
}

.view-back span {
 display: block;
 float: right;
 padding: 5px 20px 5px;
 width: 100%;
 text-align: right;
 font-size: 16px;
 color: rgba(255,255,255,0.6);
}

.view-back span:first-child {
 padding-top: 20px;
}

.view-back a {
 display: bock;
 font-size: 18px;
 color: rgba(255,255,255,0.4);
 position: absolute;
 right: 15px;
 bottom: 15px;
 border: 2px solid rgba(255,255,255,0.3);
 border-radius: 50%;
 width: 30px;
 height: 30px;
 line-height: 22px;
 text-align: center;
 font-weight: 700;
}

.view-back a:hover {
 color: #fff;
 border-color: #fff;
}

.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
 color: rgba(255,255,255,0.2);
 text-shadow: 0 0 1px rgba(255,255,255,0.2);
 padding-right: 5px;
}
Hope you enjoyed this.

source codrops

Comments

Popular posts from this blog

Network Topologies (Tutorial-4)

Topology refers to the way in which the network of computers is connected. The choice of topology is dependent upon--- Type and number of equipment being used  Planned applications and rate of data transfers  Required response times  Cost Types of Network Topologies Physical Topology: Physical topology defines how devices are connected to the network through the actual cables that transmit data(physical structure of the network)  Logical Topology: Logical Topology (also referred to as Signal Topology) is a network computing term used to describe the arrangement of devices on a network and how they communicate with one another.

Cisco Hierarchical Model

Cisco Hierarchical Model Defined by Cisco to simplify the design, implementation, and maintenance of responsive, scalable, reliable, and cost-effective networks. The 3 layers are logical and not physical – there may be many devices in a single layer, or a single device may perform the functions of 2 layers, eg: core and distribution. The Cisco Hierarchical Model

Eden: PHP Library To Get Things Easy For PHP Developer

Eden is PHP Library designed for helping developers in their rapid development work. In Our most of the project we have to integrate our developed website or application with most of  the social networking websites like Google, Facebook, Twitter, yahoo etc. so what we do is we integrate libraries of different websites differently Although We could make the code reusable but still if the websites increases then confusion will also increases. Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax. Eden Will work With Most Of Web services including Amazon Web service Facebook Foursquare Google twitter tumbler Paypal Yahoo You could Download the File From  Eden Official Website  and Can use this will just a simply including this...