# ultimate-store-kit/1.6.1/assets/css/usk-edd-category-grid.css

Ultimate Store Kit – Store Builder Addons for Elementor, WooCommerce Store Builder, EDD Store Builder, version 1.6.1. 192 lines.

- Page: https://pluginprobe.com/plugins/ultimate-store-kit/1.6.1/code/assets/css/usk-edd-category-grid.css
- Raw: https://pluginprobe.com/plugins/ultimate-store-kit/1.6.1/raw/assets/css/usk-edd-category-grid.css
- Modified: 2024-04-16T05:01:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ultimate-store-kit/1.6.1/code/assets/css/usk-edd-category-grid.css#L10-L20`.

```css
:root {
  --ep-edd-category-grid-item-height: 400px;
  --ep-edd-category-grid-counter: 25px; }

.usk-edd-category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); }
  .usk-edd-category-grid .category-link {
    text-decoration: none; }
  .usk-edd-category-grid .edd-item {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid #ece8e8;
    border-radius: 10px; }
  .usk-edd-category-grid .edd-content {
    position: absolute; }
  .usk-edd-category-grid .usk-edd-category-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; }
  .usk-edd-category-grid .title {
    color: #2b2d42;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    margin: 0;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-bottom: 6px; }
    .usk-edd-category-grid .title:hover {
      color: #d90429; }
  .usk-edd-category-grid .edd-category-count {
    color: #ef233c;
    font-size: 13px;
    text-transform: uppercase;
    margin: 0;
    transition: all 0.3s ease; }
    .usk-edd-category-grid .edd-category-count .edd-count-text {
      padding-left: 5px; }
  .usk-edd-category-grid .edd-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: transparent; }
  .usk-edd-category-grid.style-1 .edd-item:hover {
    transition: all 0.3s ease; }
  .usk-edd-category-grid.style-1 .usk-edd-category-grid-image {
    object-fit: cover;
    min-height: 240px;
    height: 100%;
    width: 100%; }
  .usk-edd-category-grid.style-1 .edd-content {
    text-align: center;
    padding: 20px;
    width: 200px;
    background: rgba(255, 255, 255, 0.582);
    border-radius: 5px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; }
  .usk-edd-category-grid.style-2 .edd-item {
    height: 100px;
    overflow: hidden; }
    .usk-edd-category-grid.style-2 .edd-item:hover .usk-edd-category-grid-image img {
      transform: scale(1.1); }
  .usk-edd-category-grid.style-2 .usk-edd-category-grid-image {
    width: 100%;
    height: 100%; }
    .usk-edd-category-grid.style-2 .usk-edd-category-grid-image img {
      transition: all 0.3s ease; }
  .usk-edd-category-grid.style-2 .edd-content {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    z-index: 1; }
  .usk-edd-category-grid.style-2 .title {
    color: #fff;
    margin: 0; }
    .usk-edd-category-grid.style-2 .title:hover {
      color: #d90429; }
  .usk-edd-category-grid.style-2 .edd-category-count {
    margin-left: auto; }
  .usk-edd-category-grid.style-2 .edd-count-text {
    display: none; }
  .usk-edd-category-grid.style-2 .edd-count-number {
    background: #fff;
    color: #2b2d42;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: inherit;
    border-radius: 100px; }
    .usk-edd-category-grid.style-2 .edd-count-number:hover {
      color: #fff;
      background: #d90429; }
  .usk-edd-category-grid.style-3 .edd-item {
    background: #fff; }
  .usk-edd-category-grid.style-3 .edd-content {
    position: static;
    padding: 20px;
    z-index: 1; }
  .usk-edd-category-grid.style-3 .usk-edd-category-grid-image {
    object-fit: cover;
    height: 240px;
    width: 100%; }
  .usk-edd-category-grid.style-4 .edd-item:hover .usk-edd-category-grid-image img {
    transform: scale(1.1); }
  .usk-edd-category-grid.style-4 .edd-item:hover .title {
    transform: translateY(0); }
  .usk-edd-category-grid.style-4 .edd-item:hover .edd-category-count {
    opacity: 1;
    transform: translateY(0); }
  .usk-edd-category-grid.style-4 .usk-edd-category-grid-image {
    object-fit: cover;
    height: 220px;
    width: 100%; }
    .usk-edd-category-grid.style-4 .usk-edd-category-grid-image img {
      transition: all 0.3s ease; }
  .usk-edd-category-grid.style-4 .edd-content {
    bottom: 0;
    padding: 20px;
    overflow: hidden;
    z-index: 1; }
  .usk-edd-category-grid.style-4 .title {
    color: #fff;
    transform: translateY(30px);
    transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease; }
    .usk-edd-category-grid.style-4 .title:hover {
      color: #d90429; }
  .usk-edd-category-grid.style-4 .edd-category-count {
    color: #d4d7ea;
    opacity: 0;
    transform: translateY(25px);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.4s step-end, opacity 0.4s ease; }
  .usk-edd-category-grid.style-5 .edd-item {
    display: flex;
    align-items: center;
    justify-content: center; }
    .usk-edd-category-grid.style-5 .edd-item .usk-edd-category-grid-image {
      height: 220px; }
    .usk-edd-category-grid.style-5 .edd-item:hover .usk-edd-category-grid-image img {
      transform: scale(1.1); }
    .usk-edd-category-grid.style-5 .edd-item:hover .title {
      opacity: 0; }
    .usk-edd-category-grid.style-5 .edd-item:hover .edd-category-count {
      opacity: 1;
      transform: scale(1.1) translateY(-10px); }
  .usk-edd-category-grid.style-5 .usk-edd-category-grid-image {
    height: 100%;
    width: 100%;
    object-fit: cover; }
    .usk-edd-category-grid.style-5 .usk-edd-category-grid-image img {
      transition: all 0.3s ease; }
  .usk-edd-category-grid.style-5 .edd-content {
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 1; }
  .usk-edd-category-grid.style-5 .title {
    background-color: #2b2d42;
    padding: 8px 20px;
    border-radius: 2px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    transform: translateY(20px);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease; }
    .usk-edd-category-grid.style-5 .title:hover {
      color: #d90429; }
  .usk-edd-category-grid.style-5 .edd-category-count {
    color: #fff;
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.17, 0.73, 0.66, 0.99) 0s, z-index 0.3s step-end, opacity 0.3s ease;
    line-height: 1; }
  .usk-edd-category-grid .edd-item-overlay {
    transition: all .3s ease; }

.edd-item-match-height--yes .usk-edd-category-grid .swiper-slide {
  height: initial; }

```