Making an image a hyperlink in lightbox

Question

I'm trying to make the image inside the lightbox item - "portfolio-1.png" lead to the page explainpage.html on click. However, when I hover over the image normally, a smaller version of that same image shows up within the image while hovering and the link does not work.

    <div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
        <div class="position-relative overflow-hidden mb-2">
            <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
            <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
                <a href="img/portfolio-1.png" data-lightbox="portfolio">
                    <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
                </a>
                <!-- Add the link inside the lightbox item -->
                <a href="explainpage.html" data-lightbox="portfolio" data-title="Explanation">
                    <!-- This empty <a> tag is just a placeholder to enable linking the image -->
                    <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
                </a>
            </div>
        </div>
    </div>


  [1]: https://i.stack.imgur.com/U1WDi.png

Answer 1

The issue might be with the structure of the HTML code. You're nesting an image within an anchor tag (<a>). This might be causing the problem with the hover effect and preventing the link from working as you expect it to. Maybe restructuring your code could help. For example -

<div class="col-lg-4 col-md-6 mb-4 portfolio-item first">
<div class="position-relative overflow-hidden mb-2">
    <a href="explainpage.html" data-lightbox="portfolio" data-title="Explanation">
        <img class="img-fluid rounded w-100" src="img/portfolio-1.png" alt="">
    </a>
    <div class="portfolio-btn bg-primary d-flex align-items-center justify-content-center">
        <a href="img/portfolio-1.png" data-lightbox="portfolio">
            <i class="fa fa-plus text-white" style="font-size: 60px;"></i>
        </a>
    </div>
</div>

Edit: Maybe you could consider styling this structure in a separate .css file for easier testing and improved maintainability.