ItemOverlay with main (over-layed) image link

julzorlSep 7, 2023

Hello, is it possible to do item overlay and keep link to work when clicked outside of overlay icons?

e.g.,

<div class="product-image">
                                    <a href="/details/@Model.ProductType.UrlFriendlyName/@product.UrlFriendlyName/@product.AltProductId"><img src="~/ProductData/ProductImages/thumbs/vertical270/@product.Image" alt="@product.Name"></a>
                                    <div class="bg-overlay">
                                        <div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400">
                                            <a href="~/ProductData/ProductImages/@product.Image" class="btn btn-light tooltip-highlighted nocolor" data-bs-toggle="tooltip" data-bs-placement="top" title="Zoom In" data-lightbox="image"><i class="bi-eye"></i></a>
                                            <a href="#" class="btn btn-light tooltip-highlighted nocolor"
                                               data-notify-msg="<i class='bi-info-circle-fill me-1'></i> The colour has been added!" 
                                               onclick="addSample('@product.Id', '@product.Name', '@product.Image', @product.ProductTypeId); SEMICOLON.Modules.notifications(this); return false;"
                                               data-bs-toggle="tooltip" data-bs-placement="top" title="Add to Order Sample"><i class="uil uil-shopping-cart"></i></a>
                                            <a href="/details/@Model.ProductType.UrlFriendlyName/@product.UrlFriendlyName/@product.AltProductId" class="btn btn-light me-2 tooltip-highlighted nocolor" data-bs-toggle="tooltip" data-bs-placement="top" title="View Details"><i class="uil uil-arrow-from-right"></i></a>
                                        </div>
                                    </div>
                                </div>

Thanks
Julia

SemiColonWebSTAFFSep 7, 2023

Hello,

You can consider adding a Stretched Link inside the .bg-overlay-content DIV. Example:

<a href="https://external-link.com" class="stretched-link"><span class="visually-hidden">Full Link</span></a>

More Documentations: https://getbootstrap.com/docs/5.3/helpers/stretched-link/ .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.