I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page.
I attempted to nest the <a> tag within another <a> tag, which did not work as expected. I also searched for some "data" code to include in the "href" line but haven't found a solution yet. Here is the current code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox" href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I would like the clicked image to link to a detailed project page while still allowing viewers to see a zoomed version of the image. Any assistance would be greatly appreciated. Thank you.