# How can I layer an image over another component?

**URL:** https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313
**Category:** Questions about Thunkable X
**Created:** [January 30, 2021, 6:25am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313 "2021-01-30T06:25:58Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)
#### Post date: [January 30, 2021, 6:25am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/1 "2021-01-30T06:25:58Z")

</div>

how to hover an image over an component ?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [January 30, 2021, 6:42am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/2 "2021-01-30T06:42:25Z")

</div>

Can you say more about what you’re trying to do?

---

<div class="post-metadata">

### Author: ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)
#### Post date: [January 30, 2021, 6:43am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/3 "2021-01-30T06:43:24Z")

</div>

i want imAGE OVER DATA VIEWER list

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [January 30, 2021, 6:43am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/4 "2021-01-30T06:43:34Z")

</div>

you can do in new ui by overlapping

---

<div class="post-metadata">

### Author: ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)
#### Post date: [January 30, 2021, 6:47am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/5 "2021-01-30T06:47:09Z")

</div>

in old ui  
how to do?

---

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [January 30, 2021, 6:56am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/6 "2021-01-30T06:56:29Z")

</div>

you cant

---

<div class="post-metadata">

### Author: ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)
#### Post date: [January 30, 2021, 7:02am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/7 "2021-01-30T07:02:28Z")

</div>

thats not good  
there must be some solution

---

<div class="post-metadata">

### Author: ![apploro.codert](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/apploro.codert/32/107708_2.png) [@apploro.codert](https://community.thunkable.com/u/apploro.codert)
#### Post date: [January 30, 2021, 9:48am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/8 "2021-01-30T09:48:47Z")

</div>

not possible i guess

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [January 30, 2021, 10:14am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/9 "2021-01-30T10:14:07Z")

</div>

If all what you are after is to place an image on top of the data viewer list then put an image component in the screen and choose absolute position (Advanced) for the image. The data viewer should have the default height and width positions. It will show the image as if it is on top of the data viewer.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/5/95adcd0732c85de5b421e72e40a8da124c20f2cf.png)

---

<div class="post-metadata">

### Author: ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)
#### Post date: [February 1, 2021, 5:50am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/10 "2021-02-01T05:50:02Z")

</div>

yes that only

---

<div class="post-metadata">

### Author: ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)
#### Post date: [June 12, 2021, 7:51pm UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/11 "2021-06-12T19:51:40Z")

</div>

… i know that this is old topic, but issue is new to me so here i am 🙂  
thank you @muneer for solutions… im trying to overlap with a container instead of a picture… all seems ok, with few problems:

1. even if the container`s visibility is set to FALSE by default at the start of the screen, it is still visible if ive set position to absolute…  
 ![screen01](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/9/c95c3517ce051fd2729401aa4173feb514ee43ab.png)  
 ![screen02](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/5/a5157a33cc5e570937007990e504fb8373a25856.png)  
Weird thing is that this problem occurs only when im runnin on mobile… all is fine on thunk preview.
2. another issue that i have: is there any solution to deactivate DataViewerList while this on top container is shown ? (the trigger to activate it is choosing a value from this DataViewerList and i see that i still can choose another value clicking around that top container;
3. i managed to change the background colour of selected item in list, but clicking another item let last item coloured, and will color that item too…in the end ill have multiple items coloured. My goal is to color only the last item clicked 🙂  
Thank you for your time.

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [June 12, 2021, 8:07pm UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/12 "2021-06-12T20:07:43Z")

</div>

> [@mimostel](#):
>
> even if the container`s visibility is set to FALSE by default at the start of the screen, it is still visible if ive set position to absolute…

Yes, there is a known bug that is only active with Android devices. It is working fine on iPhone.

> [@mimostel](#):
>
> another issue that i have: is there any solution to deactivate DataViewerList while this on top container is shown ? (the trigger to activate it is choosing a value from this DataViewerList and i see that i still can choose another value clicking around that top container;

You can set it to `invisible` so that nothing is shown.

> [@mimostel](#):
>
> i managed to change the background colour of selected item in list, but clicking another item let last item coloured, and will color that item too…in the end ill have multiple items coloured. My goal is to color only the last item clicked 🙂  
> Thank you for your time.

I’m not sure I understood you but see this  
[https://x.thunkable.com/projectPage/5fe49968180d0200197113a3](https://x.thunkable.com/projectPage/5fe49968180d0200197113a3)

---

<div class="post-metadata">

### Author: ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)
#### Post date: [June 12, 2021, 8:40pm UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/13 "2021-06-12T20:40:27Z")

</div>

> [@muneer](#):
>
> Yes, there is a known bug that is only active with Android devices. It is working fine on iPhone.

me and my luck ☹

> [@muneer](#):
>
> You can set it to `invisible` so that nothing is shown.

yes, but i still want to be shown 🙂 … looking for something like deactivating butons

> [@muneer](#):
>
> I’m not sure I understood you but see this  
> [Thunkable](https://x.thunkable.com/projectPage/5fe49968180d0200197113a3)

its exactly what im looking for

---

<div class="post-metadata">

### Author: ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)
#### Post date: [June 13, 2021, 5:36am UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/14 "2021-06-13T05:36:18Z")

</div>

> [@mimostel](#):
>
> me and my luck ☹

You can make a workaround like changing the size of the container to be 0.1 and changing the position to be **off** screen.

> [@mimostel](#):
>
> but i still want to be shown 🙂

You can code it in the `item click` block to say something like

If container is not visible then  
Do nothing  
Else  
Do something  
End if

> [@mimostel](#):
>
> its exactly what im looking for

Glad to have helped

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 1:30pm UTC](https://community.thunkable.com/t/how-can-i-layer-an-image-over-another-component/1075313/15 "2024-11-08T13:30:26Z")

</div>


