# Bouncing "Scroll Down" Arrow on Hero Sections

> Adds a gently bouncing arrow to the bottom of any Cover block with the class "wpide-scroll-hint", inviting visitors to scroll past a full-screen hero.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: hero, cover, animation, scroll
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-scroll-hint-arrow/

## Code

```css
.wp-block-cover.wpide-scroll-hint {
    position: relative;
}

.wp-block-cover.wpide-scroll-hint::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.8;
    z-index: 2;
    animation: wpide-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes wpide-scroll-bounce {
    0%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(8px) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-cover.wpide-scroll-hint::after {
        animation: none;
    }
}
```

## Notes

Add wpide-scroll-hint to the Cover block's Additional CSS class(es). The arrow is decorative and hidden from screen readers.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Bouncing "Scroll Down" Arrow on Hero Sections" in its snippet library and add it in one click; or create a new CSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/