# Mostruário A main photo with a magnifier that enlarges details on hover, thumbnails below and a fullscreen view with zoom. > Mostruário is an exclusive THM Componentes component for product pages: the main photo gets a magnifier that follows the mouse with a zoomed panel, pinch zoom and double tap on phones, thumbnails with arrows, a fullscreen view with wheel zoom and full keyboard navigation. It suits online stores, catalogs and portfolios. - Category: Commerce and conversion - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/mostruario/ ## What it looks like It looks like a big online store's product gallery. The main photo fills the frame with rounded corners, a discount badge at the top left and a counter like 3 / 6 at the bottom right. On hover, a white frame follows the cursor and a floating panel on the right shows that area enlarged, like a magnifying glass; when space is short, the photo itself zooms in place. Round white arrows switch images, and a strip of thumbnails below marks the current one with a colored border. On phones you can pinch and double tap to zoom. A button opens the photo fullscreen over a navy background. ## You may be looking for this if you asked for something like - “a product photo that zooms in when I hover” - “a magnifier on the product image like big stores have” - “a gallery with thumbnails under the main product photo” - “pinch to zoom on product photos on mobile” - “open the product photo in fullscreen” - “show a discount badge on top of the product photo” - “make my store product page look professional” - “let shoppers see the fabric or finish up close” ## Also known as product gallery, product image zoom, image magnifier, hover zoom, lightbox, thumbnail gallery, zoom lens ## When to use - Ecommerce product pages with several photos per item - Fashion, furniture and decor catalogs where the finish sells - Photography or architecture portfolios that need close-up zoom - Stores visited mostly on phones, with pinch and double tap to zoom ## When to avoid - Low resolution photos, which turn blurry when enlarged - Galleries with dozens of images, where a grid or masonry layout organizes them better - English interfaces as is, since the accessible labels and hints are in Portuguese ## How to ask your AI ```text Build a product page gallery with a magnifier that follows the mouse and a zoomed panel, pinch zoom and double tap on phones, thumbnails with arrows, a fullscreen view with zoom, discount badges and keyboard navigation with arrows and Enter. ``` With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising. ## Questions about Mostruário ### Does Mostruário's magnifier work on phones? On phones, Mostruário swaps the magnifier for gestures: pinching zooms up to 4 times, anchored between the fingers, one finger drags the enlarged image and a double tap toggles between 1 and 2.5 times at the tapped point. Since the main photo captures these gestures, page scrolling does not start on top of it. ### How do I change the photos and badges in Mostruário? Pass the images prop with src, alt and an optional badge per image, such as a discount. Mostruário uses the alt text in the labels of the photo and its thumbnail, accepts v-model:index to sync with a color or size picker and emits events when the image changes, zooms or opens fullscreen. ### Does Mostruário work with a keyboard and screen readers? Yes. In Mostruário, the main photo takes focus and announces its position and description; arrow keys switch images and Enter or Space opens fullscreen, a native dialog that closes with Esc and also responds to the arrows. Thumbnails are options in a list, with the current one marked. ## Related components - [Sacola](https://vibecode.thmtecnologia.com/en/components/sacola/): A cart that slides in from the side of the store, with coupons, shipping by postal code and a free shipping bar. - [Veredito](https://vibecode.thmtecnologia.com/en/components/veredito/): A customer reviews block with a star average, bars per rating, filters, sorting and a review form. - [Monóculo](https://vibecode.thmtecnologia.com/en/components/monoculo/): A round magnifying glass follows the mouse over a photo and shows the details enlarged, right in place. - [Fotograma](https://vibecode.thmtecnologia.com/en/components/fotograma/): One large photo at a time that slides out of frame as the next one grows from the center. - [Cortiça](https://vibecode.thmtecnologia.com/en/components/cortica/): Photos of different heights fitted into columns, with category filters that rearrange everything with animation. - [Balcão](https://vibecode.thmtecnologia.com/en/components/balcao/): A three-step payment screen with a Pix QR code, card installments and boleto, with the order summary alongside. --- 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).