By Stephen Walker

On the homepage (at the time of this writing) you will notice a post slider. This is not a native Avada feature. It is more than likely you will recognize it from the CSS Tricks website that Chris Coyier built and maintains. He implemented this look a couple of years ago and I have always wanted to do something similar, but never took the time to try. Enter Oxygen Builder. I was taking a look at the Oxygen Facebook group and noticed a new tutorial from Elijah showing how to do this in Oxygen. As I watched, I started thinking about how this could be done with Avada. While it seemed easy enough, I knew there might be some bumps along the way and there were, but after a couple of hours, I had a working solution. The key is custom CSS and being able to identify the right classes to target.

The Post Card

The first thing to build was the post card. There is nothing clever about this card, except you don’t do anything except add the dynamic data elements and a custom CSS class is applied to the container — I used .trick-cards as my class name. There is a 32px padding on all sides and the content layout is space between.

  • Date
  • Title
  • Category
  • Excerpt
  • Spacer (set to grow = 1)
  • Nested column (15%+85%)
    • Feature image
    • Author

Post Cards Element

Create a column and give it a class name — I gave mine the class of .scroller. Add a post cards element.

By default, Avada is fairly stuck in its ways when it comes to column counts and I could not find a way to get more than six columns. The trick in this instance is to set the column count to zero — I do suspect with the custom CSS that will be added in the next step, this probably doesn’t matter. I built the post query to show posts, based on categories, total posts to twelve (this is arbitrary), and no pagination. I set the post card alignment to stretch, but again with the CSS to be added this probably won’t matter.

The CSS

Now comes the magic. (I would not have known to do some of this without the video linked above.)

The cards

Post cards are an unordered list that renders the card layout based on the query loop parameters that you set in the post cards element. This list is the key to the styling. Reference the name you used for your columns, start to style the element. The first thing to do is set the overflow so that the content can move beyond the boundaries of the column. Next, transform your list into a grid. I tried using flexbox but that was not successful so I turned to CSS Grid. I am a novice at this feature so I turned to CSS Grid Generator which allowed me to pick one row and the number of columns. Next is setting negative margins on the cards to create the overlap. The addition of the z-index was to overcome an issue with the content of the nested column. The transform classes are added for the on-hover effects. The focus-within was for accessibility (keyboard navigation) if a user relies on a keyboard to navigate the list.

/* Applied to the column */
.scroller{
  overflow-x:scroll!important;
}
.scroller ul.fusion-grid{
  display:grid!important;
  grid-gap: 1rem;
/* the number of columns (12) should match the number of posts in the post cards loop */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
}
.scroller li:not(:first-child){
  margin-left:-148px;
  z-index:100;
  box-shadow: -2rem 0 4rem -2rem #000;
}
.scroller li:hover,.scroller li:focus-within{
  transform:translateY(-1rem) rotate(3deg);
}
.scroller li:hover ~ .trick-cards,.scroller li:focus-within ~ .trick-cards{
  transform:translateX(148px)!important;
}

UPDATE: The scroll bar

I am a MacBook user and the scrollbar doesn’t show up by default and the styling is okay, but I noticed that Windows machines want to show the scroll bar all the time and the styling is not so great. Fortunately, modern browsers make it easy to style. The border used allows the thumb (the part you move) to appear larger than the track

scroller::-webkit-scrollbar {
    height: 30px;
  }
  .scroller::-webkit-scrollbar-track {
  background: #404040;
  border-radius:0;
  border-top: 12px solid #282828;
  border-bottom: 12px solid #282828;
  }
  .scroller::-webkit-scrollbar-thumb {
    background:#ed9a36;
    border-radius:20px;
     border: 10px solid #282828;
  }

The card

Aside from the line of CSS that targets the cards in the transformation, the CSS for the card is fairly simple. Setting the default height and width, a background gradient, and the border-radius. The styling to the anchor tags was added to override the default link colors.

.trick-cards{
  min-width:300px!important;  
  min-height:350px;
  transition:.3s all ease-in-out;
  background: linear-gradient(85deg,#434343,#262626);
  border-radius:10px;
}
.trick-cards a{
  display:block;
  color:#ffffff!important;
}
.trick-cards a:hover{
    color:#e08733!important;
}

Video Overview (added Sep 28, 2022)

For privacy reasons YouTube needs your permission to be loaded. For more details, please see our Privacy Policy.
I Accept

Originally published on February 26, 2022

share the article

2 Comments

  1. Darrin Stern September 26, 2022 at 9:40 pm - Reply

    Would you ever make a video of how to do this? I have tried on and off to copy this style for my website. I think this would be a cool way to show testimonials.

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.