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

Screenshot of the block structure
  • 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;
}

Originally published on April 15, 2023

In this story

a light house in the middle of the oceanThe Best and Worst Feature of Avada 7.10
My Avada dot comTheme Fusion Announces My.Avada.com

2 Comments

  1. Mohammed Maaz May 19, 2023 at 9:20 am - Reply

    Hi, I have come across “https://awb4wp.com/demos/fixed-element/” on how to develop fixed bottom.

    My request to you is on how to make custom floating column fixed to the center-right. kindly refer https://properties.emaar.com/en/properties/creek-waters-2/

  2. Stephen Walker May 19, 2023 at 10:12 am - Reply

    Thank you for your message. To do what you asked, you should use the off-canvas capability of Avada. It works very well for this type of feature.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.