I have a div containing a hidden button and an inner div filled with graphs and text. Occasionally, I need to blur the inner div and make the button float on top in the center of the blurred section, similar to the layout seen on subscription prompts found on sites like Medium or news websites (simplified for this example). Currently, I am achieving this by using absolute positioning for the button. However, I'm encountering issues with hover functionality on the button - it doesn't change background color or cursor when hovered over. My project involves material UI and react. Below is a code snippet:
const useStyles = makeStyles((theme) => ({
blur: {
filter: "blur(7px)",
},
relativePos: {
position: "relative",
},
absolutePos: {
position: "absolute",
top: "50%",
left: "50%",
},
floatingBtn: {
"&:hover": {
cursor: "pointer",
backgroundColor: "red",
},
},
});
// some other stuff
<div className={classes.relativePos}>
<Button
variant="contained"
color="primary"
className={`${classes.absolutePos} ${classes.floatingBtn}`}
>
Button Text
</Button>
<div className={classes.blur}>
{/* Blurred Inner Div Stuff */}
</div>
</div>
I am open to suggestions: either improving the current implementation for proper functionality OR considering a different, more modern approach without relying on absolute positioning.