The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

This article will show you how to display images on your Essential Grid Filters.

1. Make sure the filters you'd like to use are also selected as the grid's main source.

2. Add the "filter" element to your Grid, and then select your filters.

3. Make note of the "slug" name for each of your filters

4. Add the following CSS inside the Item Skin Editor and replace the "data-selectedfilter" with your filter "slug" name and the "background: url" link with your preferred image links.

Quick Note:

To display the images on the right of the grid filter instead of left, replace the words "before" in the CSS below with the word "after"

/* Change the "data-selectedfilter" name with the "slug" name */
/* Example: [data-selectedfilter="filter-my-filter-slug"] */
 
/* Change the "background: url("");" link with the your preferred image link */
/* Example: background: url("http://www.themepunch.com/my-image.png"); */
 
.esg-filterbutton[data-filter="filter-entertainment"]:before {
  background: url("http://www.themepunch.com/entertainment.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50%!important;
}
 
.esg-filterbutton[data-filter="filter-scenery"]:before {
  background: url("http://www.themepunch.com/scenery.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50%!important;
}
 
.esg-filterbutton[data-filter="filter-modern"]:before {
  background: url("http://www.themepunch.com/modern.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin: 5px 10px 5px 0px;
  border-radius:50%!important;
}

.esg-filterbutton {
    float:left;    
}
 
.esg-filterbutton span {
    margin-top: 15px!important;
    float: left;
}

Popular Solutions