> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-reveal-3.md).

# Image Reveal #3

### Component Structure

* **IR3 SECTION** (Section): Serves as the foundational layer for the image reveal effect, facilitating the positioning and alignment of the reveal mechanism.
* **IR3 CONTAINER** (Container): Centers the image within the viewport, ensuring it's properly aligned for the reveal effect.
  * **IR3 IMAGE CONTAINER** (Div): The primary structure that houses the image and its masking effect, employing the `ir3__img-container` class for size, position, and overflow control.
    * **IR3 IMAGE MASK** (Div): Utilizes a grid layout to create multiple masking elements across the image surface, styled with the `ir3__img-mask` class. This layer is designed to reveal the image beneath through the animation of its grid items.
      * **IR3 MASK GRID** (Divs): Individual grid items within the mask, each styled with the `ir3__mask-grid-item` class, act as segments of the overall mask. These segments are animated to disappear and reveal the image below.
    * **IR3 IMAGE** (Image): The target image for the reveal effect, fitting the container perfectly to ensure the reveal effect is applied uniformly. Styled with the `ir3__img` class to cover the container's area.

### Animation Structure

**IR3 - SCROLL REVEAL**

This timeline defines the scroll-triggered animation sequence for the Image Reveal #3 component, consisting of a singular animation that fades out the grid items to uncover the image beneath:

* **Grid Item Fade-Out Animation**: Targets each grid item within the `.ir3__img-mask`, gradually changing their opacity to 0. This creates an effect where the image is revealed piece by piece, adding a dynamic visual interest as the user scrolls. The animation applies to all children of `.ir3__img-mask` that match the `.ir3__mask-grid-item` class, with the animation duration set to 0.5 seconds for each item.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/image/image-reveal-3.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.