Knockout Text Effect

This tutorial explains how to enliven your Gridbox sites by adding a knockout text effect using CSS code...
Learn more
Add knockout text effect
This tutorial explains how to enliven your Gridbox sites by adding a knockout text effect using CSS code. Knockout text, or text masking as it is also called, is a visual effect where the background image is visible through the words. Using only CSS code, you can easily add a fresh coat of paint to your Gridbox sites without any extra effort.

To implement the knockout text effect on your website, you will need a code editing tool and Gridbox plugins: Text, Headline, Counter, and Countdown.

Tools

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.