--- title: "21 – Image Reveal" slug: "21-image-reveal" updated: 2024-07-11T15:07:34Z published: 2024-07-11T15:07:34Z --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.mapp.com/llms.txt > Use this file to discover all available pages before exploring further. # 21 – Image Reveal ## Description Interactive Image Reveal block. Images can be clicked to reveal up to five underlying images, tap each image to reveal the next, and so on. These could show offers, questions, and answers to a quiz, etc. The last layer can be an external link; however, a link can be applied to any layer, but subsequent layers are removed. All elements are editable and can be hidden or shown. ## Default block view **Desktop** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4af8b217-a963-4cca-a127-c1d885a31034.png) **Mobile** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/6bd3e11c-6185-425d-a067-4f6dbab4a212.png) ## Formatting options ### Padding Refers to the space between the block's content and border. This can be edited per the requirements using the panel on the right side (**Details tab**). | **Option** | **Details** | **Default** | | --- | --- | --- | | - Heading Top Padding - Description Top Padding - Images Top Padding - T&C's Top Padding | Top | 30 | | - Subtext 1 Top Padding - Subtext 2 Top Padding | Top | 0 | | - Subtext 1 Bottom Padding - Subtext 2 Bottom Padding | Bottom | 0 | | - Heading Bottom Padding - Description Bottom Padding - Images Bottom Padding | Bottom | 0 | | - T&C's Bottom Padding | Bottom | 30 | ### Block Background Color Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions. | **Option** | **Details** | **Default** | | --- | --- | --- | | Background Color | Block Background Color | #e0dede | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/ea8e04a1-b937-4ba5-8282-b9281d4762d5.png) ### Font Weight Used to change the font sizes for each element. | **Option** | **Details** | **Default** | | --- | --- | --- | | Heading Font Size | Values are in px; enter values | 34 | | Description Font Size | 18 | | Subtext Font Size | 18 | | T&C's Font Size | 14 | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/0b48d54a-3d27-4b8f-a1f4-cb4d3ccacc79.png) ### Hide/Show Use the toggles to hide or show all the different elements. | **Option** | **Details** | **Default** | | --- | --- | --- | | Hide/Show | Heading | Show | | Description | Show | | Subtext-1 | Show | | Subtext-2 | Show | | T&C's | Show | ### Image Selection It allows you to change the number of images from 0 to 3. | **Option** | **Details** | **Default** | | --- | --- | --- | | Image Quantity? | 0 - Images | 3 - Images | | 1 - Image | | 2 - Images | | 3 - Images | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/e64ecda2-6e10-488c-8be6-0c7c78b7c553.png) ### Fallback Images Upload the fallback images to the Content Store and add the image URLs to the relevant fields in the Details Tab. > Only the fallback image will be visible in the Editing UI. | **Option** | **Details** | **Default** | | --- | --- | --- | | Fallback Images | Fallback Image 1 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545096/fallback_01.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545096/fallback_01.png) | | Fallback Image 2 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545097/fallback_02.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545097/fallback_02.png) | | Fallback Image 3 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545098/fallback_03.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545098/fallback_03.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4d0d2084-505c-4e7b-8c55-e4a7f499ffe9.png) ### Reveal Images This refers to the options to add the reveal images. Upload the images to the content store first, then add the image URLs to the relevant fields in the Details Tab. > You must do this for all the reveal images you want to use. If you only have two main images and wish to have three taps to reveal those, then you will need to upload six reveal images. 3 for position one and 3 for position 2. | **Option** | **Details** | **Default** | | --- | --- | --- | | Interactive image | Image 1 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545100/image_01.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545100/image_01.png) | | Image 2 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545101/image_02.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545101/image_02.png) | | Image 3 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545102/image_03.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545102/image_03.png) | | Image 4 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545103/image_04.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545103/image_04.png) | | Image 5 | [http://cts-demo.cust-mta.de/imgproxy/img/2041545104/image_05.png](http://cts-demo.cust-mta.de/imgproxy/img/2041545104/image_05.png) | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/313825bb-c813-4bcb-b2b6-dd09275aea65.png) ### Image Links This refers to the option to link the image between the 1 to 5 images. > The setting is the same for each set of links. Adding a link to reveal two on position one means the tap/reveal will stop at reveal 2, and the 3 rd will not render. Leaving all five off will render all five reveal images. | **Option** | **Details** | **Default** | | --- | --- | --- | | Interactive Image Toggle Links | Link Image 1 | Off | | Link Image 2 | Off | | Link Image 3 | Off | | Link Image 4 | Off | | Link Image 5 | Off | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/5e394741-badb-4798-8ae6-f28cc159e701.png) ### Fallback Image Links It allows you to add the link to the fallback image. | **Option** | **Details** | **Default** | | --- | --- | --- | | Fallback Image Links | Fallback Image 1 Link | Blank | | Fallback Image 2 Link | Blank | | Fallback Image 3 Link | Blank | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/c33f971a-8d5c-4c52-87c8-f26d1386d3d0.png) ### T&C's Link Add the terms and conditions should they be needed. | **Option** | **Details** | **Default** | | --- | --- | --- | | T&C's Link | Terms and Conditions Link | Blank | ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/875c4745-3c5b-40f7-ae09-c3e59e6fbee6.png) ## Compatibility As with the Video, Carousel, and hotspot blocks, support can be limited, but applying fallback assets for incompatible devices will still make for enjoyable viewing and interaction. ### Interactive view **Desktop** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/56889537-cd0f-4590-b215-b192ee8a962e.png) **Mobile** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/4702afcb-b24e-4315-8c33-d0ed4c58eda8.png) ### Fallback view **Desktop** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/9073f060-62a1-4860-9f07-5485aa5b7373.png) **Mobile** ![](https://cdn.document360.io/554b9b98-6720-4d8b-9919-c7b203d72648/Images/Documentation/a90b984f-0f9e-410b-951b-885991f892fe.png)