# React Hover lift Helper

> Lift an element and add a shadow on hover or focus for a subtle sense of depth.

## How it works

Add `.hover-lift` to any element to translate it upward and deepen its `box-shadow` on `:hover` and `:focus-visible`. It is a lightweight way to signal that a card, tile or other surface is interactive.

The effect sets only `transform` and `box-shadow`, so it composes with anything — cards, buttons, list items, plain containers — and it honours [`prefers-reduced-motion`](https://coreui.io/react/docs/accessibility/reduced-motion/): a reader who asks for reduced motion still gets the raised shadow and offset, without the animation.

## Example

Hover the card below, or tab to it. It is an `<a>` rather than a `<div>` so the `:focus-visible` half of the helper is reachable from the keyboard.

```html
<a href="#" className="card hover-lift text-decoration-none" style={{ width: '18rem' }}>
  <div className="card-body">
    <h5 className="card-title">Hover me</h5>
    <p className="card-text mb-0">Hover or focus this card to see it lift with a shadow.</p>
  </div>
</a>
```

Because it only touches those two properties, it works just as well on a control:

```html
<button type="button" className="btn btn-solid theme-primary hover-lift">Lift on hover</button>
```

## Customizing

### CSS variables

CoreUI for React's hover lift uses local CSS variables on `.hover-lift` for enhanced real-time customization.

```scss
$hover-lift-tokens: defaults(
  (
    --cui-hover-lift-transition-duration: .2s,
    --cui-hover-lift-transition-timing: ease,
    --cui-hover-lift-transform: translateY(-.25rem),
    --cui-hover-lift-box-shadow: var(--cui-box-shadow-lg),
  ),
  $hover-lift-tokens
);
```

Override them to tune the distance, the shadow or the timing — a larger rise with a snappier transition:

```html
<a href="#" className="card hover-lift text-decoration-none" style={{ '--cui-hover-lift-transform': 'translateY(-.5rem)', '--cui-hover-lift-transition-duration': '.1s', width: '18rem' }}>
  <div className="card-body">
    <h5 className="card-title">Bigger lift</h5>
    <p className="card-text mb-0">Customized transform and duration.</p>
  </div>
</a>
```