Menu
I've noticed that :hover in Tailwindcss uses the defaults hover selector which causes 'stuck' hover states on mobile. Is there a way to modify the :hover function to do a @media(hover:hover) instead?
373
Use the scale-{percentage} , scale-x-{percentage} , and scale-y-{percentage} utilities to scale an element.
We can use Tailwind's hover modifier to create hover effects for elements. While we can target and style different properties of an element on hover, Tailwind does not allow us to chain multiple classes to a single hover instance. Even though we use multiple hover modifiers, they will all fire simultaneously.
To add more animations, you can follow the same steps: add the keyframes to theme. extend. keyframes object, then add the animation to theme. extend.
Tailwind zoom image on hover effect So once we hover over the card-zoom class, the inner image and text element should start the zoom animation. These scale animations will ensure the image becomes bigger, and the text will zoom smaller on mouse hover - all in all, it creates a cool image zoom effect.
By far the simplest way is to add your own @media rule to the @responsive-class of rules in tailwind. How you can do that is described in the official tailwind documentation under the topic of custom media queries.
Simply add this to your config:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'hover-hover': {'raw': '(hover: hover)'},
}
}
}
}
This translates to @media (hover: hover) { ... } in css. And voila, you could use hover-hover:text-red to display red text only for devices that have hover ability.
To make your own, leave 'raw' as is and change the other two attributes to whatever media query you want. The first attribute hover-hover is what you use in tailwind. The second (hover: hover) is what your actual css @media query looks like. E.g.: hover: none or pointer: coarse.
Now, go ahead and use hover-hover:hover:text-red to modify your hover states.
61
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
