我的网格中的图片有问题。我在网格中有四张图片,每行显示 2 张
"sm:grid-cols-2"
我在图片上的叠加层尺寸合适。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>
);
};