Knockout Text Effect. How To Create Wow Effect With Image In Text?

14 May 2020

We want to share with you new tips & tricks on how to make your website more attractive using just a few lines of CSS code. Namely, we going to show you how to enliven your sites by adding a Knockout Text Effect, as well as improve and pump your skills in using CSS code.

Knockout text or as call it text masking is a visual effect where the background image is visible through the words. This technique is impressive and adds uniqueness to sites. For a long time, this effect was achieved by using photo editor and as a result, received only a static flat image. But now using only the CSS code, you can easily and without extra effort add a fresh coat of paint to Gridbox sites.

The knockout text effect opens up new ideas for the design of headlines and text. For example, you can add your company slogan using knockout text effect and focus visitors on the main idea of ​​your business. Before you begin, we recommend using a bulky font for the best effect.

Here are a few awesome examples for your inspiration. See, get new ideas, and implement!

Step 1: Copy Class Suffix.

Class Suffix should be placed in the field "Class Suffix" of the plugin Text, Headline, Counter or Countdown.

knockout-text

Step 2: Copy CSS Code.

Copy CSS code and paste to the Gridbox Code Editor.

.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(https://www.example.com/images.jpg);
    transform: translate3d(0, 0, 0);
} 

https://www.example.com/images.jpg should be replaced with your image URL.

That's all, just a few lines of code, and you yourself added wow effect to Gridbox site. Also in our previous tips and tricks, you can find how to add 20 Stylish Lightbox Animation and how to diversify your site navigation with 28 Amazing Navigation Hover Effects. Don't stop, continue to improve your sites and make them unique!