Structure:

  • Add CSS class resultsClass to the container that you would like to blur
  • Add CSS block to page or creative level CSS:
    • .resultsClass {
      -webkit-filter: blur({{ResultsClass}});
        filter: blur({{ResultsClass}});
      }
  • Add two rules to the page. The "does not exist" value should be the amount of px you would like the blur to be blurred by, and the "exists" value should always be 0px.
    • Condition: If FormComplete does not exist
      Action: Save data ResultsClass equals 5px
    • Condition: If FormComplete exists
      Action: Save data ResultsClass equals 0px

IE FIX:
Add an empty container inside the container that has the “Blurred Results” in it. That container should have the ieContainer class on it, and you should name it as well, so you can find it later in the List. 

Add this CSS to the page or creative level CSS:

  • .ieContainer {position: absolute; width: 100%; height: 100%;top: 0; left: 0; background: rgba(0,0,0,0.9);z-index: 10;display: none;}

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
      .ieContainer {display: block !important;}
    }

Category 1

50%

Low Suggestion: Ullamcorper platea vestibulum consequat risus orci a duis pulvinar eleifend molestie a natoque parturient scelerisque a praesent a.

Category 2

75%

Low Suggestion: Ullamcorper platea vestibulum consequat risus orci a duis pulvinar eleifend molestie a natoque parturient scelerisque a praesent a.