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;
}
Originally published on April 15, 2023
In this story
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/
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.