A CodePen demo is a great way to illustrate your problem – your HTML/CSS/JS won’t get mangled there.
Alternatively use the back ticks method as described in the black info block titled “Posting Code”.
With the way you’re currently doing things (using the native behaviour of an anchor and href attribute to navigate to a new location where your larger image is), there’s no clean and easy way to adopt the behaviour you desire because you’ve navigated away from the main page and are viewing an image in the browser and not a web page. It sounds like you’re looking for a popup/modal overlay script that will open the image enlargement over the current page contents. Start your search using “popup script” and/or “modal overlay script” to find example online of how it’s done. Here’s something to start you off http://fofwebdesign.co.uk/template/_testing/modal-popup-effects.htm