# Crachá A row of overlapping round photos; on hover, a tag with name and role pops up and tilts with the cursor. > Crachá is a THM Componentes component that shows a row of overlapping round avatars. Hover a photo and a black tag with name and role springs up above it, then tilts and slides sideways as the cursor moves, like a little sign swinging. It suits team sections, author lists and partner showcases. - Category: Navigation and scroll - Origin: Adapted from open source under the MIT license, with a ready THM prompt - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript, Tailwind CSS v4, Motion for Vue - Interaction: Mouse - URL: https://vibecode.thmtecnologia.com/en/components/cracha/ ## What it looks like It looks like those team photo rows where the faces touch. The avatars are 56-pixel circles with a white border, partly overlapping. Hover one and the photo grows slightly and moves to the front, while a black tag appears above it with the name in bold and the role below, in white text. The tag starts small, rises with a springy bounce and, as the cursor moves across the photo, tilts and slides toward the same side, like a little sign swinging. Two thin green and blue lines run along its bottom edge. The tag stays black in both themes and disappears when the mouse leaves. ## You may be looking for this if you asked for something like - “team photos that show the name when I hover” - “round avatars side by side with a little tooltip on top” - “show who the founders are in a more playful way” - “that effect where the name pops up and wobbles above the photo” - “an author list with job titles appearing on hover” - “overlapping customer faces with a tooltip that springs up” - “make the about us section feel more modern” ## Also known as bouncy name tag, avatar group, avatar stack, hover tooltip, team avatars, name tag tooltip ## When to use - A team or founders section on a company page - Social proof with customer or student faces near the main call to action - A list of authors, speakers or mentors for a course or event - A credits strip showing who worked on a project ## When to avoid - Essential information, since the tag depends on the mouse and does not open from the keyboard - Audiences that browse almost only on phones, where there is no hover ## How to ask your AI ```text Create a row of overlapping avatars for the team section with a playful tooltip: on hover, a tag with name and role springs up and tilts with the cursor. Make it also open on focus and tap, use my brand colors and provide a static version for reduced motion. ``` With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising. ## Questions about Crachá ### Does Crachá work on phones? Only partly. Crachá responds to mouse events, such as entering, moving over and leaving a photo, so on touch screens the tag may not appear. The avatars stay visible, with the name in each image's alt text. For phones, ask your AI to open the tag on tap or to show the name and role below. ### Can Crachá be used with a keyboard and screen reader? Not out of the box. Crachá does not take focus or open its tag from the keyboard, and name and role only show on hover; a screen reader reads just the name in each photo's alt attribute. Ask your AI to make each avatar focusable and show the tag on focus, with the role exposed too. ### How do I change the colors of Crachá? In Crachá the tag is black with white text and two thin green and blue lines at the bottom, fixed colors that do not change in dark mode. The THM Componentes prompt tells your AI to swap those tones for your project color tokens, so you can have a light tag in the light theme, for example. ## Related components - [Baliza](https://vibecode.thmtecnologia.com/en/components/baliza/): Tooltips and menus pinned to the button that opens them, switching sides on their own when they hit an edge. - [Relicário](https://vibecode.thmtecnologia.com/en/components/relicario/): A badge with a small yellow folder icon: hover it and the folder opens as up to three photos fan out. - [Azulejo](https://vibecode.thmtecnologia.com/en/components/azulejo/): Photos cut into diamonds that interlock like a mosaic and open into full squares on hover. - [Causo](https://vibecode.thmtecnologia.com/en/components/causo/): Customer photos stacked at slight angles, with the testimonial quote appearing word by word beside them. - [Passarela](https://vibecode.thmtecnologia.com/en/components/passarela/): A translucent icon bar where each icon grows as the mouse gets closer, like on a Mac. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).