Author: | sydneyjean |
---|---|
Views Total: | 2,993 views |
Official Page: | Go to website |
Last Update: | December 30, 2015 |
License: | MIT |
Preview:

Description:
Perspective Hover is a vanilla JavaScript plugin which uses Velocity.js library to create an interactive hover effect on card elements like the Apple TV Poster.
How to use it:
Include the necessary Velocity.js JavaScript library and the Perspective Hover plugin on the webpage.
<script src="js/velocity.min.js"></script> <script src="js/script.js"></script>
Build the html structure.
<div class="js-perspective"> <div class="perspective-card-wrap"> <div class="js-perspective-card perspective-card"> <div class="perspective-card__content"> <span>Hover Me</span> </div> </div> </div> </div>
The required CSS / CSS3 rules.
.perspective { /* perspective: 800px; */ /* perspective-origin: top center; */ } .perspective-card-wrap { perspective: 1000px; perspective-origin: top center; display: inline-block; } .perspective-card__content { position: absolute; top: 2rem; left: 0; width: 100%; transform: translateZ(40px); text-align: center; } .perspective-card { width: 200px; height: 300px; margin: 50px; color: white; padding: 1rem; text-transform: uppercase; font-family: 'open sans'; background-image: url(https://images.unsplash.com/photo-1441906363162-903afd0d3d52?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=5b57e367fd1e525f687202b75468c678); text-align: center; background-color: white; box-shadow: 0px 3px 20px rgba(0,0,0,0.15); /* necessary for effect */ position: relative; transform-style: preserve-3d; will-change: transform; }