Submit your widget

Cool jQuery Image for 3d Hover effect

Created 2 years ago   Views 11101   downloads 2584    Author ariona
Cool  jQuery Image for 3d Hover effect
View DemoDownload 546.7 KB
38
Share |

This is a Simple jQuery plugin for 3d Hover effect.

jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015 on Codepen 3D hover plane effect.

The idea is transforming the element into 3d space using CSS3 transform, playing with translateZ for spacing the elements, and detecting mouse movement to change the transform value

Usage

Include jQuery, and jquery.hover3d.min.js within your HTML

HTML

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

There is a minimal markup required, the element container and element that will be transformed into 3d card

<div class="project">
    <div class="project__card">
        <!-- Content element goes here -->
    </div>
</div>

CSS

There is no special CSS file to be included, you can write your own CSS and playing with transform on child elements. However there is helper class that will be added when hovering in and out.

/* This class can be replaced using options */
.hover-in{
    transition: .3s ease-out;
}
.hover-out{
    transition: .3s ease-in;
}

Read more:https://github.com/ariona/hover3d