Creating an Overlay Post Card

In a recent Avada Studio addition, the team used a combination of absolute positioning and a hover opacity effect to create an interesting overlay effect (gray boxes with indigo hover). I was curious if it was possible to do the same with a post card element. The short answer, of course, is yes, but with a post card some other challenges arise, specifically how to handle the featured image. I used the featured image as the background, set a fixed height with custom CSS, and added a class for keyboard users.

Since the top column is set to position absolute, the lower column is actually sitting on top. The lower column has a default opacity of 0 which makes all elements invisible. Then the opacity is changed to 100% on hover, which gives it an overlay effect. All of the layout and settings are what I used for the post card on the demo page, but everything can be changed to meet your design requirements.

The structure

For the cards, the recipe is fairly simple

• two 1/1 nested columns, both with the class of box-400
• upper column
  • Icon element set to a newspaper (optional)
  • Title element set to the post title
  • Text element set to post date
  • Background image set to featured image
  • Blend mode of overlay
  • Background color is set to a dark gray
  • Position set to absolute
• lower column
  • An additional class of box-target
  • Icon element set to a newspaper (optional)
  • Title element is set to the post title, and the link is set to the permalink
  • Text element set to the excerpt
  • Button set to permalink (redundant and completely optional)
  • Background color set to a dark to slightly lighter gray gradient

The CSS

Two classes solve the main problems of consistent height and keyboard accessibility. The box-400 class sets a fixed height of 400px which can be adjusted to meet your needs. The box-target changed the opacity value if an element has focus — this is typical of keyboard users tabbing through a page.

.box-400{
  height:400px;
}
.box-target:focus-within{
--awb-filter:opacity(100%)!important;
}