0

enter image description hereI am trying to create a custom card component in React and I want the content to be on top of the blurred background image. I read some examples but I cant seem to figure out the exact solution needed. Here is my code.

`

import React from "react";
import { motion } from "framer-motion";

export default function Pricing_Card({ title, image, children, heigth }) {
  return (
    <div
      style={{
        margin: 20,
        // marginLeft: "10%",
        width: "20%",
        height: heigth,
        borderRadius: "10px",
        boxShadow: "3px 3px 3px #D3D3D3",
        minWidth: "200px",
        minHeight: "300px",
        backgroundImage:
          'url("https://www.thriftyfrugalmom.com/wp-content/uploads/2021/10/Meatless-Mexican-Rice-Bowls.jpg")',
        backgroundSize: "cover",
        filter: "blur(1px)",
      }}
    >
      <div
        style={{
          position: "relative",
          color: "black",
          textAlign: "center",
          fontSize: 30,
          margin: 7,
          fontWeight: "bold",
          fontFamily: "Plus Jakarta Sans",
        }}
      >
        {title}
      </div>
      <div>{children}</div>
    </div>
  );
}

`

I also attached an image to see exactly what I get the test2 has the blur effect. Thanks in advance!

agrotis2231
  • 19
  • 6
  • this post might be of some help to you. https://stackoverflow.com/questions/49042095/is-it-possible-to-add-text-above-blurriness-with-css – paperskyline Oct 31 '22 at 10:27
  • thanks for your answer , I managed to make it work as I wanted to , but the problem is that i want to have different images on every card , thus I think this way is not ideal for what I want. – agrotis2231 Oct 31 '22 at 11:34

0 Answers0