Feature v15

Feature content with text overlapping a background image.

Dependencies

• Cursor Movement Effects

How to

The Feature v15 component is used to display a background image and an overlapping text container. The background below the text is blurred, and slightly animated if the user is interacting with it using a pointing device.

In the demo, we combine multiple images to create a parallax effect. However, you can use a single image, and the parallax effect will still be working.

Example:

<section class="feature-v15 js-feature-v15">
  <!-- ... -->
  
  <figure class="feature-v15__bg">
    <img class="feature-v15__bg-asset js-feature-v15__bg-asset" src="img.png">
  </figure>
</section>

Categories

• Content and Layout > Features

Bug report & feedback

Component Github page ↗