The centered text on images overlap on a grid using HTML and CSS

https://codepen.io/LifuTao/pen/JZaVNX
THE HTML:

Wannabe Baller

Savvy Entrepreneur

I'm not like the other guys

I know a lot about cars

My car is the fastest in the land

5

I'm better than them Toyota driving folks

</div>
THE CSS:

#element{
display: inline-grid;
grid-template-columns: [one] 200px [two] 200px [three] 200px;
grid-template-rows:200px 200px 200px;
position:relative;
left:200px;
top:100px;

}
.item
{
border: 1px solid red;
}
#bmw
{
max-width:100%;
}
.item:hover
{
transform:scale(1.5);
}
.overlay
{
height:100%;
width:100%;
}
.text
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:yellow;
max-width:100%;

}

The code is above ^.
The problem I'm having is that all the text gets jumbled into one another in the 5th box of the grid and I don't want that.
I appreciate any help.

1 Answer
1

This overlap occurs because you are using position absolute; on the text. Per CSS rules:

position absolute;

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

Since the immediate ancestor of the <p> elements, the <div> with class item, do not have a position, the text is positioned relative to their next closest ancestor, the <div> with class element.

<p>

<div>

item

<div>

element

To get your desired effect, try give you item class position: relative;. Check out the results here.

item

position: relative;

Thank you, it fixed the problem
– Lifu Tao
2 days ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.