Effects not working?

[ved-patel226]

^^
why isn't the blur working?

Heres my code:

import { ReactNode } from "react";
import styles from "../../styles/css/components/Atoms/Card.module.css";
import LiquidGlass from "liquid-glass-react";

export interface CardProps {
  header?: ReactNode;
  children?: ReactNode;
  imageAlt?: string;
}

export function Card({ header, children, imageAlt = "" }: CardProps) {
  return (
    <div
      style={{
        position: "sticky",
        left: "50%",
        top: "50vh",
        width: "50%",
      }}
    >
      <LiquidGlass
        displacementScale={64}
        blurAmount={1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0}
        cornerRadius={32}
        style={{
          position: "absolute",
          left: "0",
          top: "0",
          transform: "translateX(-50%)",
        }}
      >
        <div className={styles.card} aria-label={imageAlt}>
          {header && <h1 className="semi_ttl">{header}</h1>}
          <div className={styles.content}>{children}</div>
        </div>
      </LiquidGlass>
    </div>
  );
}

export default Card;

[cyberluke]

isn't absolute position with transform an issue?

 style={{
          position: "absolute",
          left: "0",
          top: "0",
          transform: "translateX(-50%)",
        }}

[ved-patel226]

i used absolute position because all the layers would spill everywhere, but i will try this. Thanks!

[ved-patel226]

Heres what it looks like without the absolute stuff:

Here you can see the misplaced layers with it off:

code:

<div
      style={{
        position: "sticky",
        left: "50%",
        top: "50vh",
        width: "50%",
      }}
    >
      <LiquidGlass
        displacementScale={64}
        blurAmount={1}
        saturation={130}
        aberrationIntensity={2}
        elasticity={0}
        cornerRadius={32}
      >
        <div className={styles.card} aria-label={imageAlt}>
          {header && <h1 className="semi_ttl">{header}</h1>}
          <div className={styles.content}>{children}</div>
        </div>
      </LiquidGlass>
    </div>

[PickleNik]

same issue here