网格大小调整:tailwind CSS 和 Reactjs

问题描述 投票:0回答:0

我的网格中的图片有问题。我在网格中有四张图片,每行显示 2 张

"sm:grid-cols-2"
我在图片上的叠加层尺寸合适。
当我将光标放在第一张和最后一张图片(1 和 4)上时,它会正确显示叠加层,但它自己的图片太小了。
第二张和第三张图片大小合适,叠加层非常合适。
不确定代码中哪里出错了。任何帮助,将不胜感激。我一直在寻找这种方式。

const container = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.2
    }
  }
};

const projectVariant = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: { opacity: 1, scale: 1 }
};

const Project = ({ title }) => {
  const overlayStyles = `absolute h-full w-full opacity-0 hover:opacity-90 transition duration-500 bg-grey z-30 flex-col flex justify-center items-center text-center p-16 text-deep-blue`;
  const projectTitle = title.split(' ').join('-').toLowerCase();

  return (
    <motion.div variants={projectVariant} className="relative">
      <div className={overlayStyles}>
        <p className="text-2xl font-playfair">{title}</p>
        <p className="mt-7">Description of the project shown</p>
      </div>
      <img src={`../assets/${projectTitle}.png`} alt={projectTitle} />
    </motion.div>
  );
};

const Projects = () => {
  return (
    <section id="projects" className="pt-48 pb-48">
      {/* HEADINGS */}
      <motion.div
        className="md:w-2/5 mx-auto text-center"
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, amount: 0.5 }}
        transition={{ duration: 0.5 }}
        variants={{
          hidden: { opacity: 0, y: -50 },
          visible: { opacity: 1, y: 0 }
        }}
      >
        <div>
          <p className="font-playfair font-semibold text-4xl">
            <span className="text-yellow">PRO</span>JECTS
          </p>
          <div className="flex justify-center mt-5">
            <LineGradient width="w-2/3" />
          </div>
        </div>
        <p className="mt-10 mb-10">Project Description </p>
      </motion.div>

      {/* PROJECTS */}
      <div className="flex justify-center">
        <motion.div
          className="sm:grid sm:grid-cols-2"
          variants={container}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, amount: 0.2 }}
        >
          {/* ROW 1 */}
         
            <Project title="Project 1" />
            <Project title="Project 2" />
          

          {/* ROW 2 */}
          <Project title="Project 3" />
          <Project title="Project 4" />
        </motion.div>
      </div>
    </section>
  );
};
reactjs tailwind-css
© www.soinside.com 2019 - 2024. All rights reserved.