Using CSS 3D Transform with jQuery plug-in for Creating Hover Effects

CSS 3 transform property and hovering effect plug-in

The jQuery Hover3d is a light-weight plug-in that can be used for creating 3D effects in images as the mouse hovers over the specified elements.

The plug-in uses CSS 3 transform property for creating effects. As such, the CSS transform property is used for applying the 2D/3D effects to the elements/images where you may use different values like rotate, skew, move, etc.

The jQuery-based hover3d plug-in uses it nicely for creating effects as you bring the mouse over images or other elements. See the demos and code in the following section to make it clearer.

A simple demo of 3D hovering effect

In this example, a simple hovering effect is created by using hover3d plug-in. As you bring the mouse over the image, the image title, and description or image category will be displayed in a “frame” with an effect. See the demo online:

jQuery CSS transform

Code:

<!DOCTYPE>
<head>

<link rel="stylesheet" href="css/jQueryHover3d.css">

</head>

<body>
    <div class="site-content">
        <div class="columns">
            <div class="column">
                <h3>A demo of simple hover effect by CSS transform</h3>
                <div class="project-list">
                    <div class="project">
                        <div class="project__card">
                            <a href="" class="project__image"><img src="images/mango.jpg" ></a>
                            <div class="project__detail">
                                <h2 class="project__title"><a href="#">The Mango</a></h2>
                                <small class="project__category"><a href="#">Awesome Fruit</a></small>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
    </div>






    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script src="js/jquery.hover3d.js" ></script>

    <script>
        $(document).ready(function(){
            $(".project").hover3d({
                selector: ".project__card",
                shine: false,
            });
        });

    </script>
</body>

</html>

 

This is how it is done!

First, you have to include the jQueryHover3d.css file in the <head> section.

Then comes the markup code where you will specify the image and different required classes. For example, the project__title is used to display some title text like I displayed “The Mango”. Similarly, you may use project__category for displaying the smaller text for the image category or a little description.

There are other useful classes as well that you may have a look at the code section on the demo page.

After the markup section, you have to include the jQuery library and plug-in file, jquery.hover3d.js before the </body> section.

  <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

<script src=”js/jquery.hover3d.js” ></script>

Finally, a small script to deal with hovering effect where you may set different values, e.g.

<script>

$(document).ready(function(){

$(".project").hover3d({

selector: ".project__card",

shine: false,

});



$(".movie").hover3d({

selector: ".movie__card",

shine: true,

sensitivity: 20,

});

});



</script>

 

An example of using invert and shine options

By using the invert option, the 3D effect will be according to the direction of the mouse. The effect will change so it looks element is facing the mouse. The shine option adds a shining layer if used and kept true. See the demonstration online:

jQuery CSS hover shine

Following is the script used in this example:

<script>

$(document).ready(function(){

$(".project").hover3d({

selector: ".project__card",

shine: true,

invert: true,

});



});



</script>

A demo of using movie__card  class for Apple TV like icon effect

In this demo, the main movie class of plug-in is used with movie__card class for creating apple tv like icon effect. Just move the mouse in different directions within the image to see the effects. See a demo online:

jQuery CSS hover apple tv

This is how the <script> is used in this demo:

<script>

$(document).ready(function(){

$(".movie").hover3d({

selector: ".movie__card",

shine: true,

sensitivity: 20,

});



});



</script>
Note: the images are set in the CSS file for this example.

You can see the complete code in the demo page.

 

Credit: Ariona at Github