I'm having trouble with a design that consists in a 6 columns grid and a text ahead it. When I hover the text, the grid child has to change its background to an image (only the column hovered). It works fine, but I have the problem hovering behind the text... it seems impossible. Is there any solution? thanks!
const [dissapear, setDissapear] = useState([20]);
return (
<PageLayout
className="bg-softBlack"
>
<div className="relative h-[480px]">
<h1
className="absolute top-32 uppercase bg-transparent text-gray-10 text-[9.028vw] leading-[0.9] tracking-[-0.06em]"
style={{ zIndex: 1000, mixBlendMode: "difference" }}
>
welcome <br />
to the LAB.
</h1>
<div className="w-full h-full absolute left-0 top-0 grid grid-cols-6">
{array.map((e, idx) => (
<div
key={idx}
className="bg-black relative"
onMouseEnter={() => setDissapear((prev) => [...prev, idx])}
>
{dissapear.some((e) => e === idx) && (
<Image src={e} alt="background" layout="fill" />
)}
</div>
))}
</div>
</div>
</PageLayout>
I'm using next js, thanks
No sure to be sure to understand, but you seems using tailwindcss.
maybe group in tailwind doc might be what you are look for.
Related
I am trying to set the background image under my components. But it always is on top, so my elements are under it.
Or in the second variant, all works fine, except that I can't apply blur-xl only to the background. it applies to background and Layout elements.
bg-repeat-y needs me to copy down my image, am I right?
import moons from './../assets/moon.svg'
const Background = ({ children }) => {
return (
<div className='bg-white '>
<div className='min-h-screen min-w-screen bg-repeat-y' style={{ backgroundImage: `url(${moons})` }}>
<div className="div"></div>
</div>
{children}
</div>
);
}
export default Background;
This Background element wraps other elements in Laoyout in react-router-dom
export const AppLayout = () => (
<div>
<Background>
<NewNavbar />
<Outlet />
<Footer />
</Background>
</div>
);
Help me, please!
try this, the blur will be applied between your components & background image
export const AppLayout = () => (
<Background>
<div class="backdrop-blur-xl h-full">
<NewNavbar />
<Outlet />
<footer />
</div>
</Background>
);
if you have any queries, refer to this link
https://play.tailwindcss.com/yX9aAMagRj
For the first variant/approach that you mentioned, you can set the z-index of the background to negative using the class -z-10 . Then your background will not come over your other elements.
I am trying to apply an onhover effect for a viewport larger than 768px. Below 768px it should look like the elements are "always onhover".
Specifically, on desktop or larger devices in general, there should be a background in a box at onhover. This background should always be shown on mobile, i.e. <768px in my case.
What am I doing wrong?
Here are the snippets.
JSX-Snippet:
import { features } from "../constants"; import styles from "../style";
const FeatureCard = ({ icon, title, content, index }) => (
<div className=
{`
flex flex-row p-6 rounded-[20px]
ss:max-sm:feature-card-small
sm:feature-card
${index !== features.length - 1 ? "mb-6" : "mb-0"}
`}
>
<div className={`
w-[64px]
h-[64px]
rounded-full
${styles.flexCenter}
bg-dimBlue`
}>
<img
src={icon}
alt="star"
className="
w-[50%]
h-[50%]
object-contain"
/>
</div>
<div className="flex-1 flex flex-col ml-3">
<h4 className="
font-poppins
font-semibold
text-white
text-[18px]
leading-[23.4px]
mb-1">
{title}
</h4>
<p className="
font-poppins
font-normal
text-dimWhite
text-[16px]
leading-[24px]
">
{content}
</p>
);
export default FeatureCard;
CSS-Snippet:
.feature-card:hover { background: var(--black-gradient); box-shadow: var(--card-shadow); }
.feature-card-small { background: var(--black-gradient); box-shadow: var(--card-shadow); }
simply apply feature-card as class without viewport specification works as expected; onhover --> background changes
different viewport-specifications (sm:..., ss:max-sm and sm:) and creation of different CSS classes (so there can be no overlap for sure) did not work
sorry if the code block looks like a mess here on stackoverflow. my first post, still learning.
Cannot figure out how to get popover to close when next Link is clicked inside. Used popover from tailwindui and added next Link, tried the headlessUI closing popover using as={Link}, no luck.
<div className='max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16'>
{about.map((item) => (
<Popover.Button key={item.name}>
<Link href={item.href}>
<a
href={item.href}
className='-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50'>
<div className='flex md:h-full lg:flex-col'>
<div className='flex-shrink-0'>
<span className='inline-flex items-center justify-center h-10 w-10 rounded-md bg-cyan-500 text-white sm:h-12 sm:w-12'>
<item.icon
className='h-6 w-6'
aria-hidden='true'
/>
</span>
</div>
<div className='ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4'>
<div>
<p className='text-base font-medium text-gray-900'>
{item.name}
</p>
<p className='mt-1 text-sm text-gray-500'>
{item.description}
</p>
</div>
<p className='mt-2 text-sm font-medium text-cyan-600 lg:mt-4'>
Learn more
<span aria-hidden='true'>
→
</span>
</p>
</div>
</div>
</a>
</Link>
</Popover.Button>```
Help please, what am i missing?
I just ran into this exact issue.
I got it working by doing two things referenced separately in the Headless UI docs. This involved creating a custom wrapper component for Next's Link and exposing the close() render prop on the Popover Panel.
A minimal example using the solution is listed first followed by an explanation with references to the docs.
Solution/Example
import { forwardRef } from 'react'
import Link from 'next/link'
import { Popover } from '#headlessui/react'
const MyLink = forwardRef((props, ref) => {
let { href, children, ...rest } = props
return (
<Link href={href}>
<a ref={ref} {...rest}>
{children}
</a>
</Link>
)
})
function Example() {
return (
<Popover>
{({ open }) => (
<>
<Popover.Button>Open Popover</Popover.Button>
<Popover.Panel>
{({ close }) => (
<MyLink href='/profile' onClick={() => close()}>
Profile
</MyLink>
)}
</Popover.Panel>
</>
)}
</Popover>
)
}
Explanation
Step 1
Expose the close() render prop inside your Popover Panel, per the alternative solution suggested in the docs.
<Popover.Panel>
{({ close }) => (
We will call this in our link to manually close the popup when the link is clicked.
Step 2
Create your own custom MyLink component (or whatever name you want) that wraps Link and forwards props to the child a element. As explained in the Headless UI docs, Next's Link component doesn't forward unknown props by default and Headless needs to do this in order to work by adding the necessary event listeners.
const MyLink = forwardRef((props, ref) => {
let { href, children, ...rest } = props
return (
<Link href={href}>
<a ref={ref} {...rest}>
{children}
</a>
</Link>
)
})
Hello so I have been working on this for hours and tried brute forcing it, with as many different solutions I could think of, but I don't seem to be getting it to work.
Goal: make the cards take up more width, when the screen is bigger
This is my root component:
function App() {
const event = new Date(Date.UTC(2000, 11, 20, 3, 0, 0));
return (
<div className="bg-gray-200 p-8 min-h-screen flex items-center justify-center antialiased text-gray-900 flex-col">
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
<Expenses date={event}></Expenses>
</div>
);
}
export default App;
This is the Expenses Component
export default function Expenses(props) {
return (
<div className="">
<ExpenseItem time={props.date}></ExpenseItem>
</div>
);
}
This is the Expense Item Component
export default function ExpenseItem(props) {
return (
<div className="bg-white rounded-lg overflow-hidden border flex h-auto mt-4 shadow">
<CalendarItem date={props.time}></CalendarItem>
<div className="p-4">
<h4 className="font-semibold text-lg">All my money for software engineering</h4>
<div>10000€</div>
<div className="mt-4 inline-block bg-indigo-300 text-white px-4 py-1 rounded-lg shadow-lg uppercase tracking-wide font-semibold text-sm ">
Delete
</div>
</div>
</div>
);
}
I am grateful for every input! Thank you!
Add "width: 100%" to the card and its parent component. When Browser resize(expand or shrink), they will resize too. You can handle the detail of their size by giving some width to the parent and the parent's width will be limit width of the card component.
On the following div:
<div className='border border-gray-400
text-gray-600
hover:border-gray-600
focus:border-green-500
focus-within:border-green-500'>
I want the hover state not to happen when an element is an in-focus state. How can I make it so?
Thanks!
Use the css :not selector, e.g. hover(:not focus):border-gray-600
Try this, border need to define width, so in this example I gave just 2 when it hovered.
check official Doc
<div className='hover:border-2 border-gray-400 text-gray-600
hover:border-gray-600
focus:border-green-500 focus-within:border-green-500'>
export const FramelessInput = ({ name }) => {
const [focused, setFocused] = useState(false);
return (
<div
className={classNames(
'w-[200px] rounded-sm border border-transparent text-gray-600 focus-within:border-green-500',
!focused && 'hover:border-gray-600'
)}
>
<input
type="text"
placeholder={name}
onFocus={(e) => setFocused(true)}
onBlur={(e) => setFocused(false)}
className="block text-sm leading-4 font-sans p-3 h-10 focus:outline-none"
/>
</div>
);
};
Try use property "ring"
<div className='border border-gray-400
text-gray-600
ring-green-500
focus-within:ring-2'>