> 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.