Canvas Support

Click portfolio image to go the target page

2 replies·opened Sep 17, 2019
S
shtsangSep 17, 2019

Hi

On the homepage or index page, users could click a small icon on the images to go to the target page they wish to view. However, would it be possible if the users could click anywhere on the image, not restricted to the small icon at the centre of the image, to go to the page they wish to view. Kindly please advise.

Pls find attached the screenshot.

<div class="portfolio-overlay">

</div>

S
shtsangSep 17, 2019

Since previous attachment is too large in size, please find the new attachment. Thanks.

<div class="portfolio-image">

attachment

	&lt;div class="portfolio-overlay"&gt;
	    [ ](eng/postgraduate.html)
	&lt;/div&gt;

</div>

📎 screenshot1.docx698 KB
S
SemiColonWebSTAFFSep 17, 2019

Hello,

Consider using the following Code for the Portfolio Items: 

<article class="portfolio-item pf-graphics pf-uielements">
	<div class="portfolio-image">
		<a href="villas-vinkeveen.html">
			<img src="images/projects/Bathhouse.jpg" alt="(BATH)HOUSE">
		</a>
		<div class="portfolio-overlay">
			<div class="portfolio-desc">
				<h3><a href="bathhouse.html">(BATH)HOUSE</a></h3>
				<span><a>Private House</a>
			</div>
		</div>
		<a href="{your-link-here}" class="portfolio-overlay-link"></a>
	</div>
</article>

and then use the following CSS code: 

.portfolio-overlay-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	z-index: 3;
}

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.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard