Canvas Support

Can I add more than two icons to a portfolio overlay?

1 reply·opened Mar 21, 2017
V
vellez94Mar 21, 2017

Is there a way to add more than two icons to a portfolio overlay? Currently, when I just add more icon lines the icons stack on each other weirdly. Below is a snippet of the code I am using.

<article class="portfolio-item pf-media pf-icons">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images/image.png" alt="image"> 
		</a>
		<div class="portfolio-overlay">
			<a href="images/image.png" class="left-icon" data-lightbox="image"><i class="icon-line-plus"></i></a>
			<a href="#" class="right-icon"><i class="icon-line-ellipsis"></i></a> 
		</div>
	</div>				
</article>

Any help is greatly appreciated!

S
SemiColonWebSTAFFMar 29, 2017

Hello,

Currently you cannot add more than 2 Icons inside the Portfolio Overlay Area. To add more Icons, you will need to Edit/Duplicating the following CSS Codes according to your preferences and add more icons with custom classes: 

.portfolio-overlay a.left-icon { margin-left: -44px; }

.portfolio-overlay a.right-icon {
	left: auto;
	right: 50%;
	margin-left: 0;
	margin-right: -44px;
}

.portfolio-overlay a.center-icon {
	display: block;
	margin: -20px 0 0 -20px;
	opacity: 0;
}

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