List Swap Image on Hover

Description

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

#1. Install Code

#1.1. First, enter Hover Image URL to Item Description

#1.2. Hover on top right of List > Click EDIT SECTION > at Format > Anchor Link > enter word: list-swap

#1.3. Hover on Page where you use List > Click Gear icon

#1.4. Click Advanced > Paste this code

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

<!-- 07.26c15v6 List Swap Image on Hover -->
<script>
  window.ListSwapConfig = {
    sectionSelector: 'section[id*="list-swap"]',
    hideDescription: true,
    fadeOutOriginal: true,
    transitionDuration: '0.6s',
    transitionEasing: 'ease',
    enableTapOnTouch: true
  };
</script>
<script src="https://code.beaverhero.com/list/0726c15v6listswaphover.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 current page (page where you use List) > Add a Block > Choose Markdown

Add this code into Markdown

<script>
  window.ListSwapConfig = {
    sectionSelector: 'section[id*="list-swap"]',
    hideDescription: true,
    fadeOutOriginal: true,
    transitionDuration: '0.6s',
    transitionEasing: 'ease',
    enableTapOnTouch: true
  };
</script>
<script src="https://code.beaverhero.com/list/0726c15v6listswaphover.js"></script>