List with Hover Reveal

Description

• list with title, background – hover list will show description, change text, background color
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add a Section > Choose Team > Choose section with (i) icon

#1.2. Hover on top right of section > Click EDIT CONTENT

#1.3. At Design, choose Simple List

#1.4. at Elements > Enable these options

#1.5. at Content > Add your desired image/text

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

#1.6-2. At Format > Anchor Link, enter word: list-hover-reveal

#1.7. Hover on Page where you added Team > click Gear icon

#1.8. Click Advanced > Paste this code.

• But if you use Personal/Basic Plan and your plan doesn’t support Injection, see step #3.1

<!-- 08.26c07v4 List with Hover Reveal -->
<script>
window.ListHoverRevealConfig = {
  titleColor: "#f2e1f2",
  descColor: "#000",
  titleColorHover: "#000",
  descColorHover: "#000",
  titleTag: "",
  descClass: "",
  titleSize: "",
  descSize: "",
  bgColor: "#000",
  bgColorHover: "#f2e1f2",
  lineColor: "#f2e1f2",
  lineColorHover: "#f2e1f2",
  listPaddingX: "",
  mobileRevealDelay: 5000
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v4listhoverreveal.js"></script>
<style>#list-hover-reveal .list-item-content__text-wrapper {align-items: center !important}</style>

#2. Customize

#2.1. To change title, description text color/hover color, change line 04 – 07

titleColor: "#f2e1f2",
descColor: "#000",
titleColorHover: "#000",
descColorHover: "#000",

#2.2. To change line, background color, hover color, change line 12 – line 15

bgColor: "#000",
bgColorHover: "#f2e1f2",
lineColor: "#f2e1f2",
lineColorHover: "#f2e1f2",

#2.3. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#3. Other

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

Then add this code into Markdown

<script>
window.ListHoverRevealConfig = {
  titleColor: "#f2e1f2",
  descColor: "#000",
  titleColorHover: "#000",
  descColorHover: "#000",
  titleTag: "",
  descClass: "",
  titleSize: "",
  descSize: "",
  bgColor: "#000",
  bgColorHover: "#f2e1f2",
  lineColor: "#f2e1f2",
  lineColorHover: "#f2e1f2",
  listPaddingX: "",
  mobileRevealDelay: 5000
};
</script>
<script src="https://code.beaverhero.com/listsimple/0826c07v4listhoverreveal.js"></script>
<style>#list-hover-reveal .list-item-content__text-wrapper {align-items: center !important}</style>