Seeking assistance in replicating the unique UI design featured in the image below, taken from a course description section on udemy.com. The goal is to create a gradient effect on specific parts of the content, similar to what is shown in the image.
https://i.sstatic.net/uYbLr.png
To experiment with this design, I have set up a code sandbox where I am working: https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js. My current focus is on applying this same UI style to a content card using material-ui. Below is my Demo.js file containing the definition for the card content:
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
root: {
maxWidth: 345
}
});
export default function ImgMediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardMedia
component="img"
alt="Contemplative Reptile"
image="https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&w=1000&q=80"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography
className="content"
variant="body2"
color="textSecondary"
component="p"
>
// Content details here
</Typography>
</CardContent>
<div className="button">
<Button size="small">Read more</Button>
</div>
</Card>
);
}
In addition, here is my styles.css file for additional styling:
.content {
max-height: 100px;
}
.content:hover {
max-height: none;
}
.button {
display: flex;
margin-top: 5px;
justify-content: flex-end;
width: 100%;
background-color: grey;
}
Any support or guidance on achieving this design would be highly appreciated. Thank you! 🙂