Come applicare il colore sfumato alla fine del contenuto? [duplicare]

Aug 18 2020

Sto cercando di replicare l'interfaccia utente dell'immagine aggiunta di seguito (presa dalla sezione della descrizione del corso udemy.com ). Stavo cercando un modo per creare un'interfaccia utente con gradiente simile solo su alcune parti del contenuto, come mostrato nell'immagine sottostante.

Ecco il codice di esempio sandbox in cui ho sperimentato https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js. Sto cercando di applicare questa interfaccia utente esatta al material-uicontenuto di una scheda. Qui è Demo.jsdove ho definito il contenuto della carta

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>
  );
}

e la mia 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;
}

Qualsiasi aiuto è apprezzato. Grazie 🙂

Risposte

Adam Aug 18 2020 at 18:00

Non sono sicuro di aver capito la domanda. Se eseguo il codice di esempio sandbox, in realtà si espande al passaggio del mouse. Forse hai trovato la risposta?