Remove portfolio hover overlay on mobile only

4 replies·opened Mar 15, 2021
A
AndreRairanMar 15, 2021

Hello,

How can I remove the portfolio hover effect on mobile only and have "always the hover effect" in the portfolio?

I tried to remove the "data-hover-animate" with JS on page load, but it does not work after the first slider refresh.

Thank you,
André.

S
SemiColonWebSTAFFMar 16, 2021

Hello,

Unfortunately, this feature is currently not available out of the box and will require Customized Codes. We will surely try adding this in Our Future Updates very soon and will send you a Notification once this is available.

Let us know if we can help you with anything else.

A
AndreRairanMar 16, 2021

Ok, Thank you.

Do you have any other suggestions to make the portfolio more user-friendly on Mobile?

S
SemiColonWebSTAFFMar 17, 2021

Hello,

You can consider using something like this:

<div class="portfolio-image">
	<a href="https://portfolio.likeinloco.com/zwernitzer">
		<img src="images/portfolio/showroom.webp" alt="SHOWROOM">
	</a>
	<div class="bg-overlay d-none d-md-block">
		<div class="bg-overlay-content flex-column" data-hover-animate="fadeIn">
			<div class="portfolio-desc-bt">
				<a href="https://portfolio.likeinloco.com/zwernitzer" target="_blank" rel="noopener noreferrer" class="button button-border button-circle button-light" data-hover-animate="fadeInUpSmall" data-hover-animate-out="fadeOutDownSmall" data-hover-speed="350" data-offset="140" data-easing="easeInOutExpo" data-speed="1250">View 360º Tour</a>
			</div>
		</div>
		<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
	</div>
	<div class="bg-overlay d-block d-md-none">
		<div class="bg-overlay-content flex-column">
			<div class="portfolio-desc-bt">
				<a href="https://portfolio.likeinloco.com/zwernitzer" target="_blank" rel="noopener noreferrer" class="button button-border button-circle button-light" data-offset="140" data-easing="easeInOutExpo" data-speed="1250">View 360º Tour</a>
			</div>
		</div>
		<div class="bg-overlay-bg dark"></div>
	</div>
</div>

This should definitely work fine. Hope this Helps!

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

A
AndreRairanMar 18, 2021

That was exactly what I was looking for, thank you!

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