Layers Help & Support

Layers 2.0.10 Update

Layers 2.0.10 Update

Removing the Envato Marketplace listings.

  • Fixed Image Ratio button in the Post widget
  • Removed redundant Envato Market listings


How to Show Titles on Post Widget Overlay Without Hover

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

This Advanced styling tutorial is useful if you are creating a Magazine Style layout or want titles to overlay your post featured images in the widget all the time without hovering. We strongly recommend DevKit for use with these tutorials, as it allows you to more easily control where the styles load.

This code is provided as-is and without support. If you are new to CSS, please take some time to read through How to Customize Your Site With CSS, containing essential knowledge for any site admin on what CSS classes are, where to find them and where to put custom code.

  1. Your Post widget should be set to Display > Overlay
  2. Click the Advanced button on the widget design bar to expand it
  3. In the Custom Class field, add show-overlay
  4. Expand DevKit and add the following.

The first style ensures the overlay is visible without a hover.

The second style ensures the title is visible on the overlay without a hover.

You can also add these to the desktop panel in DevKit to affect the widget on just desktop screens. Now all you need to do is add the show-overlay  class to any Post widget you want to show content on the overlay.

Don’t have DevKit? Add this code to the Custom CSS field in the Customizer, then add the show-overlay  Custom Class to any Post widget you want to show content on the overlay OR add it directly to the widget’s Advanced option Custom CSS field to affect only that widget.

This additional style ensures the excerpt is visible:

This additional style ensures the button is visible and centered:

This one changes the background of the overlay

rgba values must be used here to effectively override the original style. The first three numbers are the RGB value of the color, which you can convert here. Thge last is the opacity which is 0.65 by default.

To change the overlay to white, it would be

To remove the overlay color completely, the last number would be a 0. Use caution with this as your text will not show up well over busy or high contrast images.

Did you know?

Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.