mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-11-17 19:05:59 +01:00
61 lines
1.4 KiB
Svelte
Executable file
61 lines
1.4 KiB
Svelte
Executable file
<script>
|
|
import { animateIn, getBlurredPath } from '$lib/Helper.mjs'
|
|
|
|
/** @type {string}
|
|
* The path to the image. Usually the file within `static`, but can also be an URL
|
|
*/
|
|
export let image
|
|
/** @type {string | undefined} */
|
|
export let imageClass = undefined
|
|
/** @type {string | undefined} */
|
|
export let containerClass = undefined
|
|
</script>
|
|
|
|
<div class="rice {containerClass} group">
|
|
<div class="h-full w-full" use:animateIn={{ slide: 20, duration: 800 }}>
|
|
<img
|
|
src={image}
|
|
alt="Rice desktop"
|
|
class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] {imageClass}"
|
|
/>
|
|
<div class="rice-blurred">
|
|
<img
|
|
src={getBlurredPath(image)}
|
|
alt="Rice desktop"
|
|
aria-hidden="true"
|
|
class="h-full w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
.rice {
|
|
@apply relative w-full max-w-[1100px];
|
|
}
|
|
.nice-hover {
|
|
transition: all 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
|
|
}
|
|
.rice-blurred {
|
|
translate: -50% 30%;
|
|
position: absolute;
|
|
bottom: -40px;
|
|
left: 50%;
|
|
pointer-events: none;
|
|
width: calc(100% + 120px);
|
|
height: calc(150% + 120px);
|
|
opacity: 0.9;
|
|
/* filter: brightness(2.5); */
|
|
z-index: -10;
|
|
background-color: red;
|
|
mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
|
|
contain: content layout size style;
|
|
|
|
@apply -z-10 transition-[filter] duration-500;
|
|
|
|
/* Too laggy on firefox */
|
|
/* .rice:hover & {
|
|
filter: brightness(4);
|
|
} */
|
|
}
|
|
</style>
|