How to Overlay Images with Text or Links in the Content Widget

How To  Tutorials  Last Updated: Time to Read: 3 minutes

Difficulty: Moderate

This tutorial combines some Custom CSS and a custom class in the Content Widget’s Advanced option to move the content area up over the featured image. This produces an appearance similar to the Post Widget “Overlay” option found in the Display control. If you are new to CSS customization, see the following primer  How to Customize Your Site With CSS

Why doesn’t the Content Widget have an Overlay option?

The nature of the Content Widget’s column content areas allows for a lot of free-form content entry, including HTML. In most cases, this simply does not work with an overlay consistently enough to be a solid widget option for this widget.  Instead, this widget allows you to set bnackground images or colors for each column which provides the same effect. 

  1. Edit or create a new Layers page and Edit Layout to enter the Customizer
  2. Click on your page’s Body panel and click +Add aWidget and click Content
  3. Edit the Title “Our Services” and Description below it as desired, or remove the default text from these fields
  4. Choose a Layout and List Style from the right-hand design bar
  5. Edit the Title and remove the excerpt of the first column.
    • You will be able to add more info for this post in the second column.
    • If you want to provide a separate link to the post other than the title, you can add a text link using the text options here
  6. Add a Button Link and Button Text if you are not using text links in the Excerpt field.
  7. Click the Background button in the Column option bar. background-icon
    • Select an image
    • Set the background color
    • Check the Stretch option
  8. Skip to the Text option and choose:
    • Centered
    • Large
    • A color that shows up over your image
  9. Click the Columns option and choose 6 of 12
  10. Delete the next two columns, then click Add Column to duplicate your first column to setup more overlays.
  11. Click the Advanced button on the design bar to the right and add a Custom Class called content-overlay  . This is the Simple Version and will apply special styling to the entire widget.
  12. Add the following code to the Custom CSS box

content-column-overlay-simple

The first line here sets the minimum height of this widget’s columns to allow your image to show.

The second line above pads inside the column to give it a centered look.

You may want to have varying heights for your image columns. See below for variations of this technique:

content-widget-alternating

This example alternates columns with background images with normal content columns using 6 of 12 column settings and a Grid List Style.

content-widget-masonry

This example uses the Masonry List Style, and a special Custom Class set in the column‘s Advanced option (last button on the Column options bar) for adding two different classes to control our column height content-overlay-tall  and content-overlay-short . Instead of combining an overall widget Custom Class with the .column selector as shown in the original example, we can now use these two classes to set a different height in the main Advanced Custom CSS area. You can now add just the custom class to alternating columns to set it’s height depending on the orientation of the background image etc.

If you are using varying heights, you will also need to set different padding for those classes instead of using the simple version:

 

content-column-overlay-advcolumn-custom-class

You can add any hover effect to the column to animate it using the simple version of the selector. Example:

For more CSS animations and code examples, visit CSS Tricks