Portfolio Swap Image on Hover

Description

change portfolio to another image on hover
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, click on each Portfolio item > Click Settings

#1.2. Click SEO > at SEO Description, enter Hover Image URL

Something like this

https://static1.squarespace.com/static/67e3b2e4cd573b229af279fd/t/6a22448a5f1b11540df4743d/1780630666134/purple+4.jpg

#1.3. Click Gear icon on Portfolio Page

#1.4. Click Advanced > Paste this code

If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c14v2 Portfolio Swap Image on Hover -->
<script>
window.PortfolioHoverSwapConfig = {
  gridSelector: '#gridThumbs',
  itemSelector: '.grid-item',
  imageWrapperSelector: '.grid-image-inner-wrapper',
  fadeDuration: 400,
  fadeEasing: 'ease',
  enableOnTouch: false,
  cacheMinutes: 10,
  concurrency: 5,
  imageWidth: ''
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c14v2portfolioswapimghover.js"></script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit Site Footer

Add a Markdown Block

Add this code into Markdown

<script>
window.PortfolioHoverSwapConfig = {
  gridSelector: '#gridThumbs',
  itemSelector: '.grid-item',
  imageWrapperSelector: '.grid-image-inner-wrapper',
  fadeDuration: 400,
  fadeEasing: 'ease',
  enableOnTouch: false,
  cacheMinutes: 10,
  concurrency: 5,
  imageWidth: ''
};
</script>
<script src="https://code.beaverhero.com/portfolio/0726c14v2portfolioswapimghover.js"></script>