Hover Image Change Section Color

Description

hover image/icon will change section background color, you can also set hover or click behavior
view demo – password: abc
buy me a coffee

#1. Install Code

#1.1. First, you can add some Image Blocks

#1.2. In each Image Block > at ALT > enter hex color and wrap hex with # and #, something like this

#f1f#

#f00#

#000#

you can also use color name

#navy#

#1.3. Hover on top right of section > Click EDIT SECTION

#1.4. at Design > Anchor Link > Enter word: hover-img-section-color

#1.5. Hover on Page where you use Image Blocks > Click Gear icon

#1.6. Click Advanced > Paste this code

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

<!-- 08.26c29v3 Hover Image Change Section Color -->
<script>
window.HoverImgSectionColorConfig = {
  sectionSelector: 'section[id*="hover-img-section-color"]',
  desktopTrigger: 'hover',
  revertOnLeave: true,
  transitionDuration: '0.4s',
  mobileLinkDelay: 5000
};
</script>
<script src="https://code.beaverhero.com/imageblock/0826c29v3hoverimgchangesectioncolor.js"></script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Code Injection, you can edit current page > Add a Markdown Block.

Use this code into Markdown Block

<script>
window.HoverImgSectionColorConfig = {
  sectionSelector: 'section[id*="hover-img-section-color"]',
  desktopTrigger: 'hover',
  revertOnLeave: true,
  transitionDuration: '0.4s',
  mobileLinkDelay: 5000
};
</script>
<script src="https://code.beaverhero.com/imageblock/0826c29v3hoverimgchangesectioncolor.js"></script>