{"id":1502,"date":"2021-12-06T15:59:29","date_gmt":"2021-12-06T23:59:29","guid":{"rendered":"https:\/\/xyzcreativeworks.com\/?p=1502"},"modified":"2021-12-06T16:03:17","modified_gmt":"2021-12-07T00:03:17","slug":"overlap-images-using-css-grid-and-nextjs-image","status":"publish","type":"post","link":"https:\/\/xyzcreativeworks.com\/overlap-images-using-css-grid-and-nextjs-image\/","title":{"rendered":"Overlap images using CSS Grid and NextJS\/Image"},"content":{"rendered":"\n

This tutorial works regardless if you use NextJS’s Image component or just a regular img tag. <\/p>\n\n\n\n

But the genesis of this solution came from NextJS’s Image component not working well with the traditional position:relative\/absolute method.<\/p>\n\n\n\n

\"smoke<\/figure>\n\n\n\n

I needed to overlay a smoke layer on the skier so that he “blends” into the white page. While I could have created an image in Photoshop, I wanted to do it more efficiently by layering the smoke over every skier.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I have found this method to be MUCH better than the traditional way too, since it’s significantly less CSS to write.<\/p>\n\n\n\n

I think there’s a change in NextJS 12’s Image component, so you will need to target the child span instead of the child div (which I used in Next 11).<\/p>\n\n\n\n

You can review all files below in the Github repo<\/a>. I have also included my smoke.png file, but the image of the guy is not in there because I cannot share it.<\/p>\n\n\n

HTML and CSS structure to overlay images<\/h2>\n\n\n
\n