Display Images on Essential Grid Filters

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: 15pxdata-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: "" !important;
    float: left;
}

Display Images on Essential Grid Filters

Further Resources for Web Design and Development Enthusiasts

Alright! We've embarked on quite an adventure exploring the realms of this topic. But why stop there? The world of web design and development is vast, and there's always more to learn and discover. Let's dive into some resources that'll keep your knowledge fresh, your skills sharp, and your passion ignited:

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!