I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet:
HTML:
<div class="relative-parent">
<div v-for="item in 12" class="hiding-parent">
<div class="child"></div>
</div>
</div>
In this structure, relative-parent acts as the CSS grid container with multiple hiding-parent elements.
CSS:
.relative-parent {
position: relative;
width: 500px;
height: 500px;
display: grid;
place-items: center;
grid-gap: 5px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(3, 100px);
}
.hiding-parent {
overflow: hidden;
width: 100px;
height: 100px;
}
.child {
position: absolute;
width: 100%;
height: 100%;
background: red;
}
The challenge lies in making each child element span the entire width of its relative-parent. These child elements are essentially parts of one image split into 12 sections through absolute positioning and overflow: hidden on the hiding-parents.
Applying position: relative to the hiding-parent resolves the hiding issue but results in each image inheriting the parent's width, which is not desired. Positioning the parents as absolute or fixed would disrupt the grid layout.
I'm at a loss here and would greatly appreciate any guidance. Thank you!