~/css/tailwind-hover-effects

6 Tailwind Hover Effects

6 TailwindPublished 2026-10-05Free · no sign-up

Six hover patterns you will use again and again: a card that lifts, links with an underline that grows from the centre, a list that dims everything but the hovered item, rows with sliding arrows, app icons that pop and option cards that gain a ring.

Filter demos

01. Tailwind Lift on Hover

TailwindHoverCard

The most useful hover effect of all: the card rises a few pixels and its shadow deepens, saying "this is clickable". hover:-translate-y-1 and hover:shadow-xl do the work, and motion-safe: keeps the movement for people who want it.

View code

<a href="#article" class="block w-64 max-w-full rounded-2xl bg-white p-5 shadow-md ring-1 ring-slate-200 transition duration-200 hover:shadow-xl motion-safe:hover:-translate-y-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600">
  <p class="text-xs font-bold uppercase tracking-wider text-indigo-700">Article</p>
  <h3 class="mt-1 text-lg font-bold text-slate-900">Pricing pages that convert</h3>
  <p class="mt-1 text-sm text-slate-600">Six patterns worth copying, and two to avoid.</p>
</a>

02. Tailwind Centre-Out Underline Links

TailwindHoverLinks

Navigation links whose underline grows from the middle outwards. The line is an after: pseudo-element scaled from 0 to 1 on the x axis, and the same effect runs on keyboard focus.

View code

<nav aria-label="Main" class="flex gap-6 text-base font-semibold text-slate-800">
  <a href="#work" class="relative py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:scale-x-0 after:bg-indigo-600 after:transition-transform after:duration-300 hover:after:scale-x-100 focus-visible:outline-none focus-visible:after:scale-x-100">Work</a>
  <a href="#about" class="relative py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:scale-x-0 after:bg-indigo-600 after:transition-transform after:duration-300 hover:after:scale-x-100 focus-visible:outline-none focus-visible:after:scale-x-100">About</a>
  <a href="#contact" class="relative py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:scale-x-0 after:bg-indigo-600 after:transition-transform after:duration-300 hover:after:scale-x-100 focus-visible:outline-none focus-visible:after:scale-x-100">Contact</a>
</nav>

03. Tailwind Dim the Others on Hover

TailwindHoverGroup

Hovering one item fades its siblings, pulling attention to the one under the pointer. A named group (group/list) dims every item while the list is hovered, and hover:!opacity-100 keeps the hovered one bright.

View code

<ul class="group/list grid w-full max-w-xs gap-2">
  <li><a href="#design" class="block rounded-xl bg-slate-800 p-4 text-slate-100 transition-opacity duration-200 hover:!opacity-100 focus-visible:!opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 group-hover/list:opacity-50 group-focus-within/list:opacity-50"><b>Design</b><span class="block text-sm text-slate-300">Brand, UI and prototypes</span></a></li>
  <li><a href="#build" class="block rounded-xl bg-slate-800 p-4 text-slate-100 transition-opacity duration-200 hover:!opacity-100 focus-visible:!opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 group-hover/list:opacity-50 group-focus-within/list:opacity-50"><b>Build</b><span class="block text-sm text-slate-300">Shopify and custom code</span></a></li>
  <li><a href="#grow" class="block rounded-xl bg-slate-800 p-4 text-slate-100 transition-opacity duration-200 hover:!opacity-100 focus-visible:!opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-300 group-hover/list:opacity-50 group-focus-within/list:opacity-50"><b>Grow</b><span class="block text-sm text-slate-300">SEO, ads and email</span></a></li>
</ul>

04. Tailwind Rows with Sliding Arrows

TailwindHoverList

A settings-style list where each row's chevron nudges to the right and the row tints on hover. group on the link and group-hover:translate-x-1 on the icon are all it takes.

View code

<ul class="w-full max-w-xs divide-y divide-slate-200 overflow-hidden rounded-2xl bg-white shadow-sm ring-1 ring-slate-200">
  <li><a href="#profile" class="group flex items-center justify-between px-4 py-3.5 text-slate-800 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none">Profile<span aria-hidden="true" class="text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-indigo-600 group-focus-visible:translate-x-1">›</span></a></li>
  <li><a href="#billing" class="group flex items-center justify-between px-4 py-3.5 text-slate-800 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none">Billing<span aria-hidden="true" class="text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-indigo-600 group-focus-visible:translate-x-1">›</span></a></li>
  <li><a href="#security" class="group flex items-center justify-between px-4 py-3.5 text-slate-800 hover:bg-slate-50 focus-visible:bg-slate-50 focus-visible:outline-none">Security<span aria-hidden="true" class="text-slate-400 transition-transform group-hover:translate-x-1 group-hover:text-indigo-600 group-focus-visible:translate-x-1">›</span></a></li>
</ul>

05. Tailwind Icon Tile Pop

TailwindHoverIcon

App-style icon tiles that grow and tilt slightly on hover, a lively touch for dashboards and launchers. scale-110 and rotate-3 combine into one transform, and the label underneath stays put.

View code

<ul class="flex gap-5">
  <li><a href="#mail" class="group grid justify-items-center gap-1.5 rounded-lg text-xs font-semibold text-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600"><span aria-hidden="true" class="grid size-14 place-items-center rounded-2xl bg-sky-500 text-2xl shadow-md transition duration-200 motion-safe:group-hover:-rotate-3 motion-safe:group-hover:scale-110">✉️</span>Mail</a></li>
  <li><a href="#notes" class="group grid justify-items-center gap-1.5 rounded-lg text-xs font-semibold text-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600"><span aria-hidden="true" class="grid size-14 place-items-center rounded-2xl bg-amber-400 text-2xl shadow-md transition duration-200 motion-safe:group-hover:rotate-3 motion-safe:group-hover:scale-110">📝</span>Notes</a></li>
  <li><a href="#photos" class="group grid justify-items-center gap-1.5 rounded-lg text-xs font-semibold text-slate-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-indigo-600"><span aria-hidden="true" class="grid size-14 place-items-center rounded-2xl bg-rose-500 text-2xl shadow-md transition duration-200 motion-safe:group-hover:-rotate-3 motion-safe:group-hover:scale-110">🌄</span>Photos</a></li>
</ul>

06. Tailwind Border and Ring on Hover

TailwindHoverBorder

A selectable option card whose border turns colour and gains a soft outer ring on hover, the subtle style used for plan pickers. Because ring utilities draw box-shadows, the card never shifts size.

View code

<label class="flex w-full max-w-xs cursor-pointer items-start gap-3 rounded-xl border border-slate-300 bg-white p-4 transition hover:border-indigo-500 hover:ring-4 hover:ring-indigo-500/15 has-[:checked]:border-indigo-600 has-[:checked]:ring-4 has-[:checked]:ring-indigo-600/20 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-indigo-600">
  <input type="checkbox" class="mt-1 size-4 accent-indigo-600">
  <span><b class="block text-slate-900">Express shipping</b><span class="text-sm text-slate-600">Arrives in 1–2 working days</span></span>
</label>

About these Tailwind Hover Effects

group and named groups

Put group on the parent and use group-hover: on children. Named groups such as group/list let nested groups work without clashing.

Pseudo-elements as decoration

after: utilities draw the underline without extra markup. Remember Tailwind adds content-[''] automatically for before: and after:.

The important modifier

hover:!opacity-100 beats the group's dimming rule, which keeps the hovered item bright without a custom selector.

Hover is not enough

Give links and controls the same effect on focus-visible:, and use has-[:checked] or has-[:focus-visible] on wrappers like labels.

Frequently asked questions

Do these work on touch screens?

Taps trigger hover briefly on most phones; none of these effects hide information, so nothing is lost.

Is has-[] supported?

The has- variant needs Tailwind v3.4 and a browser with :has(), which every current browser supports.

Is there a CSS version?

Yes, see the CSS hover effects collection.