सामग्री के अंत में ढाल रंग कैसे लागू करें? [डुप्लिकेट]

Aug 18 2020

मैं नीचे जोड़े गए छवि UI ( udemy.com पाठ्यक्रम विवरण अनुभाग से लिया गया ) को दोहराने की कोशिश कर रहा हूं । मैं सामग्री के केवल कुछ हिस्सों पर एक समान ढाल UI बनाने के लिए एक रास्ता ढूंढ रहा था जैसा कि नीचे दी गई छवि में दिखाया गया है।

यहां नमूना कोड सैंडबॉक्स है जहां मैं प्रयोग कर रहा हूं https://codesandbox.io/s/fervent-einstein-doeql?file=/src/Demo.js। मैं इस सटीक ui को एक material-uiकार्ड सामग्री पर लागू करने का प्रयास कर रहा हूं । यहां मेरा वह स्थान है Demo.jsजहां मेरे पास कार्ड सामग्री परिभाषित है

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

और मेरा 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;
}

किसी भी मदद की सराहना की है। धन्यवाद 🙂

जवाब

Adam Aug 18 2020 at 18:00

अगर मुझे सवाल समझ में नहीं आता है तो मुझे यकीन नहीं है अगर मैं सैंपल कोड सैंडबॉक्स में करता हूं, तो यह वास्तव में होवर पर फैलता है। शायद आपको जवाब मिल गया?