First, English is not my home language, so i apologize for any mistakes or typos.
I am trying to build an isometric grid for one of my personal projects, however i encounter a problem.
(for all the following screenshots, i removed the rotation of the grid to ease comprehension)
The setting:
My grid is generated using flex and html. I will position some elements at selected squares using links with a background-image
and here is an example of the html
<div class="town-map-container" style="background-color: green;">
...
<div class="town-row" style="order: X;">
...
<div class="town-square" style="order: Y;">
<a class="building-img" href="#available-modal-X-Y" style="background-image:url("");"></a>
</div>
...
</div>
...
</div>
and the related css:
.town-map-container {
height: 1920px;
width: 1920px;
//transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg);
.town-row {
display: flex;
flex-direction: row;
width: 100%;
height: 5%;
.town-square {
height: 100%;
width: 5%;
border: 1px ridge black;
.building-img {
display: inline-block;
min-height: 100%;
width: 100%;
position: relative;
left: 0;
bottom: 0;
//transform: rotateX(0deg) rotateY(0deg) rotateZ(45deg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.building-img:hover {
border-color: blue;
box-shadow: 0 0 10px blue;
}
}
}
}
And now to the question:
I would like for the child element to overflow from the right and the top of the square. however, while increasing the width of the element overflow it from the right, increasing his height overflows it from the bottom.
(here I increased both height and width to 120%)
I tried a few options (position: relative; botom: 0; left: 0;
, ...) but i am first a backend developer and it seems I cannot think about (or google) a solution, any ideas ?
Thanks in advance.