Knockout Text Effect

This tutorial explains how to enliven your Gridbox sites by adding a knockout text effect using CSS code...


Code editor

Estimated time

5 min.

Adding Class Suffix

1. The class suffix knockout-text should be placed in the "Class Suffix" field of the Text, Headline, Counter or Countdown plugin.

Adding CSS

2. Copy CSS code below, go to Tools ➝ Code Editor ➝ CSS and paste it.


.knockout-text .ba-counter >span,.knockout-text .ba-countdown > span > span:first-child,.knockout-text .content-text *,.knockout-text .headline-wrapper > * { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(/images/picture.jpg) !important; transform: translate3d(0, 0, 0);}

/images/picture.jpg replace with your image URL.

Something is not clear? Ask a question on community forums.