{"id":13547023,"url":"https://github.com/ariona/hover3d","last_synced_at":"2025-08-14T04:11:18.435Z","repository":{"id":48494031,"uuid":"53648636","full_name":"ariona/hover3d","owner":"ariona","description":"Simple jQuery plugin for 3d Hover effect","archived":false,"fork":false,"pushed_at":"2018-01-02T03:13:22.000Z","size":764,"stargazers_count":334,"open_issues_count":2,"forks_count":107,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-31T09:07:04.529Z","etag":null,"topics":["css","hover","html","jquery"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ariona.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-11T07:37:18.000Z","updated_at":"2025-03-26T21:14:32.000Z","dependencies_parsed_at":"2022-08-30T22:31:08.577Z","dependency_job_id":null,"html_url":"https://github.com/ariona/hover3d","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariona%2Fhover3d","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariona%2Fhover3d/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariona%2Fhover3d/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ariona%2Fhover3d/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ariona","download_url":"https://codeload.github.com/ariona/hover3d/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247640462,"owners_count":20971557,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","hover","html","jquery"],"created_at":"2024-08-01T12:00:49.635Z","updated_at":"2025-04-07T11:05:22.678Z","avatar_url":"https://github.com/ariona.png","language":"CSS","readme":"\u003cimg src=\"https://raw.githubusercontent.com/ariona/hover3d/master/hover3d.png\" width=150 height=121 align=\"right\" alt=\"\"\u003e\n\n# jQuery Hover3d\n\n[![Bower version](https://badge.fury.io/bo/hover3d.svg)](https://badge.fury.io/bo/hover3d)\n\njQuery 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](http://codepen.io/ariona/pen/JopOOr).\n\nThe 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\n\n## Demo\n\nCheck out [the demo](http://ariona.github.io/hover3d/index.html)\n\n## Usage\n\nInclude jQuery, and jquery.hover3d.min.js within your HTML\n\n### HTML\n\n```html\n\u003cscript src=\"jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"jquery.hover3d.min.js\"\u003e\u003c/script\u003e\n```\n\nThere is a minimal markup required, the element container and element that will be transformed into 3d card\n\n```html\n\u003cdiv class=\"project\"\u003e\n\t\u003cdiv class=\"project__card\"\u003e\n\t\t\u003c!-- Content element goes here --\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### CSS\n\nThere 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.\n\n```css\n/* This class can be replaced using options */\n.hover-in{\n\ttransition: .3s ease-out;\n}\n.hover-out{\n\ttransition: .3s ease-in;\n}\n```\n\n### JS\n\nNext step is init the plugin on `.project` and give the selector element that will be transformed, in this case it's `project__card`.\n\n```js\n$(\".project\").hover3d({\n\tselector: \".project__card\"\n});\n```\n\n## Options\n\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\nselector | string | null | Selector for element that will be the 3d card\nperspective | integer | 1000 | Perspective value for 3d space\nsensitivity | integer | 20 | Mouse movement sensitivity, larger number is less sensitive\ninvert | boolean | false | Default behavior is the element will follow the mouse, look like it facing the mouse\nshine | boolean | false | Add shining layer\nhoverInClass | string | hover-in | Helper class when mouse hover in the element, will be removed after 300ms\nhoverOutClass | string | hover-out | Helper class when mouse hover Out the element, will be removed after 300ms\nhoverClass | string | hover-3d | Helper class when the mouse is hovering the element\n\n### Compatibility\n\nAll browser that support 3d transform and perspective. You can check it on [caniuse.com](http://caniuse.com)\n","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects"],"sub_categories":["Mouse Effect"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariona%2Fhover3d","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fariona%2Fhover3d","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fariona%2Fhover3d/lists"}