¿Cómo aplicar un color degradado al final del contenido? [duplicar]

Aug 18 2020

Estoy intentando replicar la interfaz de usuario de la imagen agregada a continuación (tomada de la sección de descripción del curso de udemy.com ). Estaba buscando una forma de crear una interfaz de usuario de degradado similar en solo algunas partes del contenido, como se muestra en la imagen de abajo.

Aquí está el sandbox de código de muestra donde he estado experimentando https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js. Estoy tratando de aplicar esta interfaz de usuario exacta al material-uicontenido de una tarjeta. Aquí está mi lugar Demo.jsdonde tengo definido el contenido de la tarjeta

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

y mi 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;
}

Se agradece cualquier ayuda. Gracias 🙂

Respuestas

Adam Aug 18 2020 at 18:00

No estoy seguro de haber entendido la pregunta. Si lo hago con la zona de pruebas del código de muestra, en realidad se expande al pasar el mouse. ¿Quizás encontraste la respuesta?