Basic CSS and using image overlay

By far the most difficult part was creating the image overlay. There were so many different ways to approach this and many seemed needlessly complicated, or that they required more code than seemed reasonable. I worked towards finding this simplest solution. I was able to achieve close to the desired result.

HOWEVER, the one part I cannot figure out is why my overlay is is JUST slightly larger in height than than the image itself. I currently have both the .overlay height and width set to 100% - as I believe thats what the code should be in the cleanest stay. But if I changed the height to 98% then it fits fine and looks the best. But I wanted to leave it as is in the inaccurate state, because I can't figure out why its doing that and changing it to that 98% feels like I'm just covering up a mistake that I don't understand.

One thing I learned, was that rather than just going into code to BUILD UP, I really should be BREAKDING DOWN the design first and doing some sort of wireframing or outlining first. This will help me to develop better organization and better hierarchies for when placing and labeling divs within divs.

Really looking forward to feedback on this, because this one STARTED better than the QR code, but quickly took me quite a while to get to what I wanted.