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