I've managed to create a grid of images where only a portion of each image is initially visible. When the "show more" button is clicked, the rest of the image should be revealed. However, there seems to be an issue with the transition effect causing the image to appear too quickly and the height adjustment to lag behind.
import React , {useState} from 'react'
function Show1() {
const [isVisible, setIsVisible] = useState(false)
const data=[
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
{name:"https://images.unsplash.com/photo-1601814933824-fd0b574dd592?auto=format&fit=crop&q=60&w=500&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8YWxpZW58ZW58MHx8MHx8fDA%3D"},
]
return (
<div className='w-10/12 flex flex-col items-center justify-center bg-violet-500 mx-auto px-10'>
<div className={`${isVisible ? 'max-h-52 overflow-hidden transition-all ease-in-out delay-1000 duration-[2s] ': 'bg-red-400 max-h-[500px] transition-all ease-in-out delay-100 duration-[2s]'} grid grid-cols-4 gap-4 w-full border-4`}>
{data.map((val,i)=>{
return <div key={i} className='w-full h-52'>
<div className='w-full h-full'
style={{
backgroundImage: `url(${val.name})`,
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
backgroundSize: "cover"
}}
></div>
</div>
})}
</div>
<button
onClick={()=>setIsVisible(!isVisible)}
className='px-5 py-2 bg-lime-300 my-6 w-fit'>
Show more
</button>
</div>
)
}
export default Show1