Bagaimana cara menerapkan warna gradien di akhir konten? [duplikat]

Question

Saya mencoba mereplikasi UI gambar yang ditambahkan di bawah ini (diambil dari bagian deskripsi kursus udemy.com ). Saya sedang mencari cara untuk membuat UI gradien yang serupa hanya pada beberapa bagian konten seperti yang ditunjukkan pada gambar di bawah ini.

Berikut adalah contoh kode sandbox tempat saya bereksperimen https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js. Saya mencoba menerapkan ui yang tepat ini ke material-uikonten kartu. Di Demo.jssinilah tempat saya menetapkan konten kartu

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"
        >
          Lizards are a widespread group of squamate reptiles, with over 6,000
          species, ranging across all continents except Antarctica Lizards are a
          widespread group of squamate reptiles, with over 6,000 species,
          ranging across all continents except Antarctica Lizards are a
          widespread group of squamate reptiles, with over 6,000 species,
          ranging across all continents except Antarctica Lizards are a
          widespread group of squamate reptiles, with over 6,000 species,
          ranging across all continents except Antarctica Lizards are a
          widespread group of squamate reptiles, with over 6,000 species,
          ranging across all continents except Antarctica Lizards are a
          widespread group of squamate reptiles, with over 6,000 species,
          ranging across all continents except Antarctica Lizards are
        </Typography>
      </CardContent>
      <div className="button">
        <Button size="small">Read more</Button>
      </div>
    </Card>
  );
}

dan saya styles.css

.content {
  max-height: 100px;
}

.content:hover {
  max-height: none;
}

.button {
  display: flex;
  margin-top: 5px;
  justify-content: flex-end;
  width: 100%;
  background-color: grey;
}

Setiap bantuan dihargai. Terima kasih 🙂

Answer 1

Saya tidak yakin apakah saya memahami pertanyaannya. Jika saya lakukan ke kotak pasir kode sampel, itu sebenarnya meluas saat mengarahkan kursor. Mungkin Anda menemukan jawabannya?