Apple tvOS Style Parallax Hover Effect with Vanilla JavaScript – Perspective Hover

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