Mixing
The centered text on images overlap on a grid using HTML and CSS
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 I'm better than them Toyota driving folks The code is above ^. This overlap occurs because you are using 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. Since the immediate ancestor of the To get your desired effect, try give you
</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 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
position absolute; on the text. Per CSS rules: position absolute;
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.<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>elementitem class position: relative;. Check out the results here.itemposition: relative;
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.
Thank you, it fixed the problem
– Lifu Tao
2 days ago