I 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!
Related
I discovered this nice 3D Hover Image Effect - https://codepen.io/kw7oe/pen/mPeepv
With the help of tutorials and guides I know I can style a component with Materials UI and apply it this way the CSS what I do. In the example link the Image is declared as background in CSS. I did it not in CSS but with the MUI Image tag. However it does not throw errors but its not working at all and I am unsure as why.
For the information I build it in React TS.
import React from 'react';
import { Box, Typography } from '#mui/material';
import Image from 'mui-image';
const styles = {
body: {
background: '#ECECEC',
},
footer: {
width: '50%',
marginLeft: '25%',
textAlign: 'center',
fontFamily: 'Julius Sans One, sans-serif',
marginTop: '24px',
},
container: {
maxWidth: '720px',
margin: '24px auto 48px auto',
},
h1: {
fontFamily: 'Montserrat, sans-serif',
textTransform: 'uppercase',
},
h2: {
fontFamily: 'Julius Sans One, sans-serif',
fontSize: '2.5rem',
},
row: {
marginTop: '12px',
},
column: {
display: 'inlin-block',
textAlign: 'center',
},
figure: {
overflow: 'hidden',
},
'a:hover': {
textDecoration: 'none',
},
'column img': {
display: 'block',
width: '100%',
height: '300px',
},
tdimension: {
width: '300px',
height: '300px',
margin: '20px auto 40px auto',
perspective: '1000px',
},
'tdimension a ': {
display: 'block',
width: '100%',
height: '100%',
backgroundSize: 'cover',
transformStyle: 'preserve-3d',
transform: 'rotateX(70deg)',
transition: 'all 0.8s',
},
'tdimension:hover a': {
transform: 'rotateX(20deg)',
},
'tdimension a:after': {
content: '',
position: 'absolute',
left: 0,
bottom: 0,
width: '100%',
height: '40px',
background: 'linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))',
transform: 'rotateX(90deg)',
transformOrigin: 'bottom',
},
};
function Hover() {
return (
<Box style={styles.container}>
<Box style={styles.row}>
<Typography style={styles.h1}>Image Hover Effect</Typography> <Typography style={styles.h2}>3D Hover Effect</Typography>
</Box>
<Box style={styles.row}>
<Box style={styles.tdimension}>
<Image src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png" style={styles['tdimension a ']}/>
</Box>
</Box>
</Box>
);
}
export { Hover };
I would replace all style attributes with sx since MUI encourages the usage of sx prop and prefers it over style attribute:
https://mui.com/system/the-sx-prop/
I would also stick to the background url inside the <a/> since the 3D Hover Effect transformations are being applied to that tag.
return (
<Box sx={styles.container}>
<Box sx={styles.row}>
<Typography sx={styles.h1}>Image Hover Effect</Typography>
<Typography sx={styles.h2}>3D Hover Effect</Typography>
</Box>
<Box sx={styles.row}>
<Box sx={styles.tdimension}>
</Box>
<Divider sx={{ padding: "1px" }} />
</Box>
</Box>
);
Now inside your styles object wrap everything related to tdimension inside a nested styling object. Your <Box/> makes use of styles.tdimension and this way all your substyling won't get lost.
...
tdimension: {
width: "300px",
height: "300px",
margin: "20px auto 40px auto",
perspective: "1000px",
a: {
background:
'url("https://mir-s3-cdn-cf.behance.net/project_modules/disp/e8346826957515.56361c2106f3f.png")',
display: "block",
width: "100%",
height: "100%",
backgroundSize: "cover",
transformStyle: "preserve-3d",
transform: "rotateX(70deg)",
transition: "all 0.8s",
},
"&:hover a": {
transform: "rotateX(20deg)",
},
"a:after": {
content: '""',
position: "absolute",
left: 0,
bottom: 0,
width: "100%",
height: "40px",
background: "linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))",
transform: "rotateX(90deg)",
transformOrigin: "bottom",
},
},
The result should be pretty identical to the codepen now.
I'm using MUI v5 to build linear progress bar.I have a scenario where if value in progress bar is 100%,I need to show tick icon at the end.The width of the bar with/without tick icon should be same,meaning icon shouldn't be placed after the bar.It should be at the end of bar.I tried with stylings and able to place tick icon at the end.But I'm unable to show the icon clearly as the bar overlaps with tick icon.
<div style={{ display: "flex", flexDirection: "row", position: "relative", alignItems: "center" }}>
<LinearProgress
variant="determinate"
sx={{
width: "100%",
borderRadius: "4px"
}}
value={50}
/>
<CheckCircleIcon sx={{ color: "blue" }} style={{ position: "absolute", width: "20px", display: "flex", justifyContent: "flex-end", right: "-2px", color: "#fff", fontWeight: "bold" }} />
</div>
Current Design
Expected Design
Here is a live demo where I've customized an MUI Slider with a checkmark SliderThumb.
The demo includes the foundation for using this as a progress bar:
Disable the slider to ignore user input. Keep in mind that disabling will change the color to gray. You can override disabled behavior through .Mui-disabled
Set the slider's value using a state variable that corresponds to your current progress
You may also choose to customize a LinearProgress component in the same way I've customized the Slider above. See the docs for LinearProgress customization.
Full slider code:
import * as React from 'react'
import Slider, { SliderThumb } from '#mui/material/Slider'
import { styled } from '#mui/material/styles'
import Box from '#mui/material/Box'
import CheckCircleIcon from '#mui/icons-material/CheckCircle'
const CheckMarkSlider = styled(Slider)(({ theme }) =>
({
color: '#3a8589',
height: 3,
padding: '13px 0',
'& .MuiSlider-thumb':
{
height: 20,
width: 20,
backgroundColor: '#fff',
border: '1px solid currentColor',
'&:hover': {
boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)',
},
'& .checkmark-bar':
{
height: 9,
width: 1,
backgroundColor: 'currentColor',
marginLeft: 1,
marginRight: 1,
},
},
'& .MuiSlider-track':
{
height: 3,
},
'& .MuiSlider-rail':
{
color: theme.palette.mode === 'dark' ? '#bfbfbf' : '#d8d8d8',
opacity: theme.palette.mode === 'dark' ? undefined : 1,
height: 3,
},
}))
const CheckMarkThumbComponent = (props) =>
{
const { children, ...other } = props
return (
<SliderThumb {...other}>
{children}
<CheckCircleIcon />
</SliderThumb>
)
}
const CustomizedSlider = () =>
{
const [value, setValue] = React.useState(20)
React.useEffect(() =>
{
const intervalId = setInterval(() => setValue(Math.random() * 100), 500)
return () => clearInterval(intervalId)
}, [value])
return (
<Box sx={{ width: 320 }}>
<CheckMarkSlider
value = {value}
disabled
components={{ Thumb: CheckMarkThumbComponent }} />
</Box>
)
}
export default CustomizedSlider
I just review a footer to make it better using a different UI framework. I try to align it but it's not properly working. The right side is not is overlapping. I tried using <div> and apply the style to set up a different element.
The issue I have is the text Follow behind the button need to be aligned with the icons and the image, input form, button and text 'Follow' and icons must be aligned in one single line and centred in the middle of the page.
The copyright text on the second line is properly aligned
I tried different combination but still not properly done
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import { Toolbar, Button } from '#material-ui/core';
import AppBar from '#material-ui/core/AppBar';
import VillageLogo from '../assets/images/village-logo.svg';
import InputBase from '#material-ui/core/InputBase';
import TextContents from '../theme/TextContents';
import FacebookIcon from '#material-ui/icons/Facebook';
import TwitterIcon from '#material-ui/icons/Twitter';
import InstagramIcon from '#material-ui/icons/Instagram';
import LinkedInIcon from '#material-ui/icons/LinkedIn';
const useStyles = makeStyles(theme => ({
root: {
display: "flex",
boxShadow: "none",
backgroundColor: "#ffffff",
marginTop: theme.spacing(3)
},
logo: {
width:"214px",
height:"28px",
marginLeft: theme.spacing(20),
marginRight: theme.spacing(3)
},
subscribe: {
display: "flex",
position: 'relative',
borderRadius: "21px",
backgroundColor: "#f4f7f8",
marginRight: theme.spacing(2),
marginLeft: theme.spacing(3),
width: "467px",
height: "40px",
// [theme.breakpoints.up('sm')]: {
// marginLeft: theme.spacing(3),
// width: 'auto',
// },
},
inputRoot: {
color: "#cecece",
fontFamily: "Source Sans Pro",
fontSize: "18px"
},
inputInput: {
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
width: "467px",
// [theme.breakpoints.up('md')]: {
// width: '20ch',
// },
},
whiteButton:{
borderRadius: 21,
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
boxShadow: "0px 8px 18px 0 rgba(0,0,0,0.14)",
paddingTop: "5px",
paddingBottom: "7px",
paddingLeft: "20px",
paddingRight: "20px",
backgroundColor: "#ffffff",
borderColor: "#ffffff",
fontFamily: "Source Sans Pro",
},
textFollow:{
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
},
textCopy:{
fontSize: '14px' ,
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
},
socialIcon:{
width: '18px',
height:'18px',
color: '#ff7255'
},
followDesc:{
display: "flex",
alignItems: "center",
marginLeft: theme.spacing(2),
margin: "auto",
},
footerMenu:{
display: "flex",
position: 'relative'
}
}));
function Footer(){
const styles = useStyles();
return (
<div className={styles.root}>
<AppBar position="static" className={styles.root}>
<Toolbar>
<img src={VillageLogo} alt="logo" className={styles.logo}/>
<div className={styles.footerMenu}>
<div className={styles.subscribe}>
<InputBase
placeholder={TextContents.SearchPlaceHolder}
classes={{
root: styles.inputRoot,
input: styles.inputInput,
}}
inputProps={{ 'aria-label': 'subscribe' }}/>
<Button className={styles.whiteButton}> {TextContents.Join}</Button>
</div>
<div className={styles.followDesc}>
<p className={styles.textFollow}>{TextContents.Follow}</p>
<FacebookIcon className={styles.socialIcon}/>
<TwitterIcon className={styles.socialIcon}/>
<InstagramIcon className={styles.socialIcon}/>
<LinkedInIcon className={styles.socialIcon}/>
</div>
</div>
</Toolbar>
<div>
<p className={styles.textCopy}>{TextContents.Copyright}</p>
</div>
</AppBar>
</div>
);
}
export default Footer
can you try this:
I added justifyContent: "center"
followDesc:{
display: "flex",
alignItems: "center",
justifyContent: "center",
marginLeft: theme.spacing(2),
margin: "auto",
},
oh and you need to get rid of margin on the p element.
try adding somewhere:
p { margin: 0 } or change the p to a div element instead
edit =====
to replicate it like the above do 2 things
add minWidth: 75px in here:
textFollow: {
fontSize: "14px",
fontWeight: "bold",
textAlign: "center",
color: "#ff7255",
fontFamily: "Source Sans Pro",
minWidth: '75px'
},
and move this line: <Button className={styles.whiteButton}> join</Button> underneath this line: <div className={styles.followDesc}>
so it looks like this:
<div className={styles.followDesc}>
<Button className={styles.whiteButton}> join</Button>
<p className={styles.textFollow}>Follow us</p>
<FacebookIcon className={styles.socialIcon} />
<TwitterIcon className={styles.socialIcon} />
<InstagramIcon className={styles.socialIcon} />
<LinkedInIcon className={styles.socialIcon} />
</div>
I'm using the MUI Card and CardMedia components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
I've tried placing the text div in above the CardMedia, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the CardMedia, but the v1 library doesn't seem to have anything like that.
Any know how to properly do this? Thanks in advance for any help!
Your CSS is off, you'll want to absolutely position the styles.overlay, and make sure the Card is position relative
Try something like this:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
Use the code below if you want to have an overlay like the Card in version 0. Remember to set the position of the container to relative so the absolute position of the overlay can take effect:
<Card sx={{ maxWidth: 345 }}>
<Box sx={{ position: 'relative' }}>
<CardMedia
component="img"
height="200"
image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
/>
<Box
sx={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
bgcolor: 'rgba(0, 0, 0, 0.54)',
color: 'white',
padding: '10px',
}}
>
<Typography variant="h5">Lizard</Typography>
<Typography variant="body2">Subtitle</Typography>
</Box>
</Box>
{...}
</Card>
I can not center my <Paper> inside div. Please help
I locate <Paper> and <RaisedButton> inside div and gave with css:
.timerArea {
text-align: center;
}
For Button it works but for Paper - no.
Style for <Paper>
const timeArea = {
height: 150,
width: 150,
textAlign: 'center',
rounded: true,
paddingTop: 65,
backgroundColor: '#76D8E3',
opacity: 0.8
};
Also my JSX:
<div className={styles.timerArea}>
<Paper style={timeArea} zDepth={1} circle>{stopWatchTime}</Paper>
<RaisedButton onClick={buttonRole} backgroundColor={buttonColor}>{buttonName}</RaisedButton>
</div>
and result on the image
Thanks in advance.
Try margin auto in paper style like this
const timeArea = {
height: 150,
width: 150,
textAlign: 'center',
rounded: true,
paddingTop: 65,
backgroundColor: '#76D8E3',
opacity: 0.8,
margin: auto,
};