Frosted Image

Description

• view demo – password: abc
• if you use Personal/Basic Plan, message me, I will install code for you

#1. Install code

First, add a Section with Background Image

Next, hover on top right of section > Click Edit Section

at Anchor Link, enter word: frosted-image

frosted-image

Next, hover on page where you added section background image > Click Gear icon

Click Advanced > Paste this code

<!-- @tuanphan - Frosted Image -->
<style>
section[id*="frosted-image"]{
  --tp-blur-max: 18;
  --tp-dim-max: .55;
  --tp-range-vh: 50;
  --tp-delay-vh: 20;
  --tp-scale-max: 1.06;
}
section[id*="frosted-image"] .tp-bg-blur-target{will-change:filter,opacity,transform;transform-origin:center center;backface-visibility:hidden}@media (prefers-reduced-motion:reduce){section[id*="frosted-image"] .tp-bg-blur-target{transition:none!important}}
</style>
<script src="https://code.beaverhero.com/other/frostedimg.js"></script>

#2. Customize

All style options here: Line 03 to Line 09

section[id*="frosted-image"]{
  --tp-blur-max: 18;
  --tp-dim-max: .55;
  --tp-range-vh: 50;
  --tp-delay-vh: 20;
  --tp-scale-max: 1.06;
}