I’ve written a code to place two images side by side and show some text on hover, but I came across a weird behavior I can’t explain and I was wondering if anyone can explain it to me.
Everything works fine with the code, but as soon as I add borders to the
.project-tile class, to add borders around the image, both images collapse to the center.
I have tried to isolate the problem but I can’t really figure it out, anyone has any idea?
This has to do with the css box-sizing property. By default, the value of box-sizing is
content-box, which means the border is not constrained by the
width: 400px; and instead causes the divs to overflow their width and trigger wrapping.
box-sizing: border-box; on
.project-tile will allow you to add borders while keeping the current positioning.