Make Portfolio Images clickable with an icon in the center

triplewhatFeb 15, 2022

How can I make the portfolio images a link without having to use the icons provided. This way someone can just click on the whole image and it will take them to the link I want without having to click on the tiny icon.

SemiColonWebSTAFFFeb 16, 2022

Hello,

This is Absolutely Possible!

Consider using this Code:

<!-- Portfolio Item: Start -->
<article class="portfolio-item col-lg-3 col-md-4 col-sm-6 col-12 pf-media pf-icons">
	<!-- Grid Inner: Start -->
	<div class="grid-inner">
		<!-- Image: Start -->
		<div class="portfolio-image">
			<a href="portfolio-single.html">
				<img src="images/portfolio/4/1.jpg" alt="Open Imagination">
			</a>
			<!-- Overlay: Start -->
			<div class="bg-overlay">
				<div class="bg-overlay-content dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item">
					<a href="portfolio-single.html" class="overlay-trigger-icon bg-light text-dark" data-hover-animate="fadeInDownSmall" data-hover-parent=".portfolio-item" data-hover-animate-out="fadeOutUpSmall" data-hover-speed="350"><i class="icon-line-ellipsis"></i></a>
				</div>
				<div class="bg-overlay-bg dark" data-hover-animate="fadeIn" data-hover-parent=".portfolio-item"></div>
			</div>
			<!-- Overlay: End -->
			<a href="#" class="position-absolute top-0 start-0 w-100 h-100 z-6"><span class="visually-hidden">Details</span></a>
		</div>
		<!-- Image: End -->
		<!-- Decription: Start -->
		<div class="portfolio-desc">
			<h3><a href="portfolio-single.html">Open Imagination</a></h3>
			<span><a href="#">Media</a>, <a href="#">Icons</a></span>
		</div>
		<!-- Description: End -->
	</div>
	<!-- Grid Inner: End -->
</article>
<!-- Portfolio Item: End -->

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.