Overlay containers and/or images

0
Hi there, I have a scenario where I have a background image. I want to add multiple buttons to specific areas of the image (if possible I want to link it to entities, which is why I think overlapping containers would be ideal). How can I achieve this? I have seen this post: https://forum.mendixcloud.com/link/questions/92527, however, I can’t get my image and label to overlap. I think my understanding of the concept is a bit off and would really appreciate a more in-depth answer. I’ve added the image to the page as a static image (also tried it inside a container) and tried the label with the label inside and outside a container
asked
2 answers
0

Here is a nice example for you.

will look like this:

The blue border is a container, having class playingboard. You won - you lost is wrapped in a container ‘gamestatus’, You won has class ‘won’, you lost has class ‘lost’

and the scss look like this:

.playingboard {
            width: 80%;
            height: 80%;
            // border: 3px rgb(122, 122, 122) solid;
            padding: 5px;
            margin: 10%;

            .mx-templategrid-item {
                padding: 2px;
            }

            .singlefield {
                margin: 1px;
                width: 100%;
                height: 100%;
                // border: 3px rgb(216, 216, 216) solid;
            }

            .gamestatus {
                position: absolute;
                margin:20%;
                width: 40%;
                font-size: xx-large;
                opacity: 85%;
                z-index: 1;
                border-radius: 33px;

                .lost {
                    color: red;
                    background-color: #ffdddc;
                }

                .won {
                    color: green;
                    background-color: #cbffcb;
                }
            }

 

answered
0

Would this help you more to understand the concept?

https://www.w3schools.com/howto/howto_css_image_overlay_title.asp 

answered