Description: hover links – change section video background, similar Portfolio Hover: background layout, works with Uploaded Video (mp4) only
#1.1. First add 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 Title, Button
#1.5. at Content > Add your desired title text, url, video
Note
- Title: enter your desired text
- Button Text: enter custom page url
- Button URL: upload your video
To upload video, you can click Attach Link in Button URL > Choose File > Upload desired video
#1.6. Hover on top right of section > Click EDIT SECTION
#1.7. at Format > Anchor Link, enter word: hoverlink-videobg
#1.8. Hover on Page where you use Team section > Click Gear icon
#1.9. Click Advanced > Paste this code
- If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1
<!-- 07.26c01v6 Hover Links - Change Video Background -->
<style>
body:not(.sqs-edit-mode-active) section[id*="hoverlink-video"] {
opacity: 0;
}
</style>
<script>
window.HoverVideoBgConfig = {
sectionSelector: 'section[id*="hoverlink-video"]',
titleTag: "h3",
mobileDelayMs: 3000,
transitionMs: 600,
revealTransitionMs: 500,
minHeight: "50vh",
verticalAlign: "center",
titleGap: "0.35em",
overlayColor: "rgba(0,0,0,0.4)",
sectionTitleColor: "#ffffff",
titleColor: "#ffffff",
titleColorActive: "#ffffff",
inactiveOpacity: 0.55,
activateFirstOnLoad: true
};
</script>
<script src="https://code.beaverhero.com/list/0726c01v6hoverlinkschangevideobg.js"></script>
#2.1. To change Section Height, change Line 14
minHeight: "50vh",
#2.2. To change Overlay Color, Links Color, change Line 17 – Line 20
overlayColor: "rgba(0,0,0,0.4)",
sectionTitleColor: "#ffffff",
titleColor: "#ffffff",
titleColorActive: "#ffffff",
#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can edit current page (page where you use Team section) > Add a Markdown Block
Add this code into Markdown
<style>
body:not(.sqs-edit-mode-active) section[id*="hoverlink-video"] {
opacity: 0;
}
</style>
<script>
window.HoverVideoBgConfig = {
sectionSelector: 'section[id*="hoverlink-video"]',
titleTag: "h3",
mobileDelayMs: 3000,
transitionMs: 600,
revealTransitionMs: 500,
minHeight: "50vh",
verticalAlign: "center",
titleGap: "0.35em",
overlayColor: "rgba(0,0,0,0.4)",
sectionTitleColor: "#ffffff",
titleColor: "#ffffff",
titleColorActive: "#ffffff",
inactiveOpacity: 0.55,
activateFirstOnLoad: true
};
</script>
<script src="https://code.beaverhero.com/list/0726c01v6hoverlinkschangevideobg.js"></script>
