Simple jQuery plugin for 3d Hover effect

  • By Rian Ariona
  • Last update: Nov 21, 2022
  • Comments: 5

jQuery Hover3d

Bower version

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

Demo

Check out the demo

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;
}

JS

Next step is init the plugin on .project and give the selector element that will be transformed, in this case it's project__card.

$(".project").hover3d({
	selector: ".project__card"
});

Options

Option Type Default Description
selector string null Selector for element that will be the 3d card
perspective integer 1000 Perspective value for 3d space
sensitivity integer 20 Mouse movement sensitivity, larger number is less sensitive
invert boolean false Default behavior is the element will follow the mouse, look like it facing the mouse
shine boolean false Add shining layer
hoverInClass string hover-in Helper class when mouse hover in the element, will be removed after 300ms
hoverOutClass string hover-out Helper class when mouse hover Out the element, will be removed after 300ms
hoverClass string hover-3d Helper class when the mouse is hovering the element

Compatibility

All browser that support 3d transform and perspective. You can check it on caniuse.com

Github

https://github.com/ariona/hover3d

Comments(5)

  • 1

    Jitter Bug

    Hi, im using chrome.

    when i hover over the element i have made the card, the hover isnt smooth, it jitters really bad. is there something that can cause jitters?

    this is my code: ( I have the classes stated in the docs already in) Archive.zip

    JS: $(".film_3d_wrapper").hover3d({ selector: ".film_3d", perspective: 1000, shine: false });

    Its not letting me upload my html so i will attach it in a .zip

    see my video: jitterbug.zip

  • 2

    Multiple elements

    Is it possible to get this working out the box with multiple elements without multiple instances? It seems that when called, on hover of one element, it applies the hover to all elements at the same time.

  • 3

    Full screen visibility on a 5k imac

    I am having the problem when i add the shine to the banner. When i hover this a couple of times it giving me stripes on my screen.

    I have the latest version of "hover3d". In the attachment is a screenshot of how it looks.

    The pink squire is the point where it breaks.

    schermafbeelding 2017-02-20 om 14 21 58

  • 4

    Odd behavior in Safari

    This plugin is great! Definitely makes the screen pop. However, I've noticed some odd behavior in Safari. It seems project__cards are being overlayed by the element used to create the shine effect.

    screen shot 2017-07-13 at 9 30 40 am

  • 5

    Support for for multiple elements without an inner wrapper

    I'm finding it difficult to use this plugin for alot of cases I have in my markup for a project I'm doing. In my html, I have some server side generated html like this....

    <div class="items">
    <div class="item-to-hover">.....</div>
    <div class="item-to-hover">.....</div>
    <div class="item-to-hover">.....</div>
</div>

    For layout and design reasons, I don't want an inner div on the "item-to-hover" divs. This prevents me from using this plugin because if I do the following, all of the items in "items" hover at the same time... $(".items").hover3d({ selector: ".item-to-hover" });

    I can fix this locally by editing the plugin on line 30 to be $card = settings.selector ? $(this).find(settings.selector) : $(this);

    Now I can just do the following without needing to specify a selector option $(.item-to-hover).hover3d();

    Which seems to solve my problem, but I'm wondering if there is a built in option that does this that I'm not aware of, or if this will cause an issue I haven't thought of.

    Thanks

Popular Tag

Related