There are cards of news. When you hover the mouse arrow you can see the details. By click on the card, you can go to an Instagram post.

News cards on desktop.

Cards on mobile.

How to make it possible to view details on a mobile device by swiping your finger up? And after that, the block returned to the place.

NewsCard.js:

import PropTypes from "prop-types";
import Image from "next/image";
import Link from "next/link";
import styles from "./NewsCard.module.scss";
import DeleteIcon from "../../public/svg/basketIcon.svg";

export default function NewsCard({
  newsData,
  color,
  canDelete,
  onDeleteIconClick,
}) {
  return (
    <Link href={newsData.url} passHref>
      <div className={styles.card}>
        {canDelete ? (
          <div className={styles.deleteIcon}>
            <DeleteIcon
              onClick={() => {
                onDeleteIconClick(newsData);
              }}
            />
          </div>
        ) : null}
        <Image
          src={newsData.imgUrl}
          alt="news-card"
          layout="fill"
          className={styles.image}
        />
        <div className={styles.info} style={{ background: color }}>
          {newsData.text}
        </div>
      </div>
    </Link>
  );
}

NewsCard.propTypes = {
  newsData: PropTypes.object,
  color: PropTypes.string,
};

Styles:

@import "../../styles/shared.scss";

.card {
  width: 350px;
  height: 344px;
  margin-right: 20px;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  @media screen and (max-width: 1150px) {
        min-width: 250px;
        min-height: 333px;
      }
}

.info {
  height: 256px;
  top: 308px;
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 0px 0px 3px 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.2px;
  color: $color-primary-light;
  padding: 10px 7px 7px 6px;
  transition: 0.5s;
}

.info:hover {
  transform: translateY(-208px);
  -webkit-line-clamp: 100;
  padding-top: 30px;
}

.image {
  border-radius: 3px;
}
.deleteIcon {
  border: none;
  position: absolute;
  cursor: pointer;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  svg {
    width: 15px;
    height: 15px;
  }
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: $color-primary-light;
}

CodePudding user response：

You can use the React Swipeable library and define a "swipe up" handler to show the card details. like so:

const [showDetails, setShowDetails] = useState(false);

const handlers = useSwipeable({
  onSwipedUp: () => setShowDetails(true),
});

Then apply the handler to the card element:

<div className={styles.card} {...handlers}>

And finally use the showDetails state to show the card details.