Skip to content

Instantly share code, notes, and snippets.

@CGLSY
CGLSY / index.html
Created July 8, 2022 02:59
Parallax Depth Cards
<h1 class="title">Hover over the cards</h1>
<div id="app" class="container">
<card data-image="https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=2&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop=">
<h1 slot="header">Canyons</h1>
<p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</card>
<card data-image="https://images.unsplash.com/photo-1479659929431-4342107adfc1?dpr=2&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop=">
<h1 slot="header">Beaches</h1>
<p slot="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>