I am trying to make a card that expands on hover and shows some extra elements, but some of the elements I want before the hover are not showing up but they do on hover?
import { CashIcon, ArrowRightIcon } from '@heroicons/react/solid'
import {ClockIcon} from '@heroicons/react/outline'
import { BsTelegram, BsTwitter } from "react-icons/bs"
const people = [
{
name: 'Jane Cooper',
title: 'Ethereum',
role: '$5',
email: '[email protected]',
telephone: ' 1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Binance',
role: '$5',
email: '[email protected]',
telephone: ' 1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
}
// More people...
]
export default function FeaturedDrops() {
return (
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{people.map((person) => (
<li key={person.email} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 group hover:scale-110 hover:bg-slate-100 hover:transition ease-linear duration-500">
<div className="w-full flex items-center justify-between p-6 space-x-6 translate-y-0 group-hover:translate-y-1 transition duration-300 group-hover:overflow-hidden ">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{person.name}</h3>
<span className="flex-shrink-0 flex px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='mr-2 ml-1 text-gray-500 font-bold'>
{person.role}
</span>
</span>
</div>
<span className="flex-shrink-1 flex px-2 w-24 mt-2 py-0.5 text-green-800 text-xs font-medium bg-blue-200 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='ml-1 text-gray-500 font-bold'>
{person.title}
</span>
</span>
</div>
<img className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src={person.imageUrl} alt="" />
</div>
<div className='invisible group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<BsTwitter className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Twitter</span>
</a>
</div>
<div className="-ml-px w-0 flex-1 flex ">
<a
href={`tel:${person.telephone}`}
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>
<BsTelegram className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Telegram</span>
</a>
</div>
</div>
</div>
<div className=' group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative bg-green-400 -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<span className="ml-3">Go To Airdrop</span>
<ArrowRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</a>
</div>
</div>
</div>
<div className='absolute top-0 right-0 h-5 w-16 bg-red-400 flex items-center text-white justify-center'>{person.isExpired ? <p className=''>expired</p> : <></>}</div>
<div className='absolute top-0 left-0 h-5 w-20 bg-white flex items-center justify-center font-medium text-xs group-hover:pb-0 group-hover:transition duration-300'>
<ClockIcon className='w-4 h-4 text-gray-600' aria-hidden="true" />
{person.timeLeft}
</div>
</li>
))}
</ul>
)
}
I think this is because of some hidden padding issue with the container with person info. also how can we remove the gap between info container and go to container when not hovered as right now the elements show up on hover and go invisible after hover but still take up space?
CodePudding user response：
Assuming that it is the badges (timeLeft, isExpired), you need to add position relative to list items, so that the badges are contained in the list item.
import { CashIcon, ArrowRightIcon } from '@heroicons/react/solid'
import {ClockIcon} from '@heroicons/react/outline'
import { BsTelegram, BsTwitter } from "react-icons/bs"
const people = [
{
name: 'Jane Cooper',
title: 'Ethereum',
role: '$5',
email: '[email protected]',
telephone: ' 1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
},
{
name: 'Jane Cooper',
title: 'Binance',
role: '$5',
email: '[email protected]',
telephone: ' 1-202-555-0170',
isExpired: true,
timeLeft:'5hrs Left',
imageUrl:
'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60',
}
// More people...
]
export default function FeaturedDrops() {
return (
<ul role="list" className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{people.map((person) => (
<li key={person.email} className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200 group hover:scale-110 hover:bg-slate-100 hover:transition ease-linear duration-500 relative">
<div className="w-full flex items-center justify-between p-6 space-x-6 translate-y-0 group-hover:translate-y-1 transition duration-300 group-hover:overflow-hidden ">
<div className="flex-1 truncate">
<div className="flex items-center space-x-3">
<h3 className="text-gray-900 text-sm font-medium truncate">{person.name}</h3>
<span className="flex-shrink-0 flex px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='mr-2 ml-1 text-gray-500 font-bold'>
{person.role}
</span>
</span>
</div>
<span className="flex-shrink-1 flex px-2 w-24 mt-2 py-0.5 text-green-800 text-xs font-medium bg-blue-200 rounded-full">
<CashIcon className='w-4 h-4 text-green-500' aria-hidden="true" />
<span className='ml-1 text-gray-500 font-bold'>
{person.title}
</span>
</span>
</div>
<img className="w-10 h-10 bg-gray-300 rounded-full flex-shrink-0" src={person.imageUrl} alt="" />
</div>
<div className='invisible group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<BsTwitter className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Twitter</span>
</a>
</div>
<div className="-ml-px w-0 flex-1 flex ">
<a
href={`tel:${person.telephone}`}
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
>
<BsTelegram className="w-5 h-5 text-gray-400" aria-hidden="true" />
<span className="ml-3">Telegram</span>
</a>
</div>
</div>
</div>
<div className=' group-hover:visible transition ease-in duration-100'>
<div className="-mt-px flex divide-x divide-gray-200 ">
<div className="w-0 flex-1 flex ">
<a
href={`mailto:${person.email}`}
className="relative bg-green-400 -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
>
<span className="ml-3">Go To Airdrop</span>
<ArrowRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
</a>
</div>
</div>
</div>
<div className='absolute top-0 right-0 h-5 w-16 bg-red-400 flex items-center text-white justify-center'>{person.isExpired ? <p className=''>expired</p> : <></>}</div>
<div className='absolute top-0 left-0 h-5 w-20 bg-white flex items-center justify-center font-medium text-xs group-hover:pb-0 group-hover:transition duration-300'>
<ClockIcon className='w-4 h-4 text-gray-600' aria-hidden="true" />
{person.timeLeft}
</div>
</li>
))}
</ul>
)
}