I have adapted Webtiki's Responsive hexagon grid into a custom html module, however something is messing with the stacking of the anchor tag.
When I added the html to my joomla site, the link seems to be pushed down below the div's for the h1 and the paragraph which make the link un-clickable when you hover of the list item. The mouse indicates that the image remains a link before the two divs move in with the hover effect. If I change the z-index of the anchor tag, then the hover effect on the list item doesn't work, so I'm not sure how to go about fixing this.
Here's a test server with the code in question Test-Server
So, my question is why is the z-index for the anchor tag changed when it's incorporated into the site? (I realize that many things can affect the positioning of an element, especially with the multiple nested divs within the html generated by a CMS like joomla). Next, what can I do to diagnose or "fix" the z-axis positioning so that the link and the hover-effect both work? I've tried using the mozilla web developer tool bar to display stacking elements, but it doesn't show anything regarding the divs in question.