The Horizontal Post Card 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 looking 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 identifying the right classes to target.

View the demo

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, and 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 of 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

View the demo