How to Create Netflix Card Animation Effect In LWC?

In this blog, you will learn how you can create Netflix Card Animation Effect in lightning web component.

Sample Code

LWC.html

<template>
    <lightning-card title="NETFLIX" icon-name="standard:video">
    <div class="container">
        <a href="#a" class="item"><img src="https://legendary-digital-network-assets.s3.amazonaws.com/wp-content/uploads/2022/02/12182718/Stranger-Things-4-Poster.jpg" alt="A"></a>
        <a href="#b" class="item"><img src="https://punto.com.ph/wp-content/uploads/2021/11/EN-US_LCDP-P5V2_Vertical_RGB_PRE.jpg" alt="B"></a>
        <a href="#c" class="item"><img src="https://sportshub.cbsistatic.com/i/2022/07/25/b87bfa41-24d7-4041-8bbe-e219c41aba52/the-sandman-netflix-poster.jpg?auto=webp&width=1500&height=2222&crop=0.675:1,smart" alt="C"></a>
        <a href="#d" class="item"><img src="https://pbs.twimg.com/media/Ec_7SzOUEAAuGit.jpg" alt="D"></a>
        <a href="#e" class="item"><img src="https://terrigen-cdn-dev.marvel.com/content/prod/1x/daredevil_s3_vertical-main_rgb.jpg" alt="E"></a>
      </div>
    </lightning-card>
</template>

LWC.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

LWC.css

.container {
    display: flex;
    margin-top: 50px;
  }
  
  .item {
    position: relative;
    display: block;
    flex: 1 1 0px;
    transition: transform 500ms;
  }
  .container:focus-within .item,
  .container:hover .item {
    transform: translateX(-25%);
  }
  .item:focus ~ .item,
  .item:hover ~ .item {
    transform: translateX(25%);
  }
  .container .item:focus,
  .container .item:hover {
    transform: scale(1.5);
    z-index: 1;
  }
  body {
    overflow: hidden;
  }
  .item img {
    display: block;
    max-width: 100%;
  }

Demo

Posted By : Date : October 12, 2022

share