v7 hover animation make link instead of image

1 reply · opened Mar 14, 2023

BbagginsMar 14, 2023

Using v7, I'm using the sample hover animation code from https://canvastemplate.com/hover-animations.html

When hovering over image, the icons display and then prompts someone to click for further action. How to change code so that when hovering:

  • no icons
  • after hovering, click on image to go to another webpage
SSemicolon WebSTAFFMar 14, 2023

Hello,

You can consider using something like this:

<article class="portfolio-item">
	<div class="portfolio-image">
		<a href="portfolio-single.html">
			<img src="images/portfolio/2/2.jpg" alt="Locked Steel Gate">
		</a>
		<div class="bg-overlay">
			<div class="bg-overlay-content dark" data-hover-animate="fadeIn">
				<a href="link-to-image.html" class="d-block position-absolute w-100 h-100"><span class="visually-hidden">Click on Image</span></a>
			</div>
			<div class="bg-overlay-bg dark" data-hover-animate="fadeIn"></div>
		</div>
	</div>
</article>

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