laravelEcomm/public/sass/_product.scss

/*---------------------
  Product
-----------------------*/
.product {
  padding-top: 0;
  padding-bottom: 60px;
}

.filter__controls {
  text-align: center;
  margin-bottom: 45px;
  
  li {
    color: #b7b7b7;
    font-size: 24px;
    font-weight: 700;
    list-style: none;
    display: inline-block;
    margin-right: 88px;
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      color: $heading-color;
    }
  }
}

.product__item {
  overflow: hidden;
  margin-bottom: 40px;

  &.sale {

    .product__item__pic {

      .label {
        color: $white-color;
        background: $heading-color;
      }
    }

    .product__item__text {

      .rating {

        i {
          color: #f7941d;

          &:nth-last-child(1) {
            color: #b7b7b7;
          }
        }
      }
    }
  }

  &:hover {

    .product__item__pic {

      .product__hover {
        right: 20px;
        opacity: 1;
      }
    }

    .product__item__text {

      a {
        top: 22px;
        opacity: 1;
        visibility: visible;
      }

      h6 {
        opacity: 0;
      }

      .product__color__select {
        opacity: 1;
      }
    }
  }
}

.product__item__pic {
    height: 260px;
    position: relative;
    background-position: center center;

    .label {
      color: $heading-color;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      display: inline-block;
      padding: 4px 15px 2px;
      background: $white-color;
      position: absolute;
      left: 0;
      top: 20px;
    }

    .product__hover {
      position: absolute;
      right: -200px;
      top: 20px;
      @include transition(all, .8s);

      li {
        list-style: none;
        margin-bottom: 10px;
        position: relative;
        
        &:hover {
          
          span {
            opacity: 1;
            visibility: visible;
          }
        }

        span {
          color: $white-color;
          background: $heading-color;
          display: inline-block;
          padding: 4px 10px;
          font-size: 12px;
          position: absolute;
          left: -78px;
          top: 5px;
          z-index: 1;
          opacity: 0;
          visibility: hidden;
          @include transition(all, .3s);

          &:after {
            position: absolute;
            right: -2px;
            top: 5px;
            height: 15px;
            width: 15px;
            background: $heading-color;
            content: "";
            transform: rotate(45deg);
            z-index: -1;
          }
        }
        
        img {
          background: $white-color;
          padding: 10px;
          display: inline-block;
        }
      }
    }
}

.product__item__text {
  padding-top: 25px;
  position: relative;

  a {
    font-size: 15px;
    color: $primary-color;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    @include transition(all, .3s);
  }

  h6 {
    color: $heading-color;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
    @include transition(all, .3s);
  }

  .rating {
    margin-bottom: 6px;

    i {
      font-size: 14px;
      color: #b7b7b7;
      margin-right: -5px;
    }
  }

  h5 {
    color: #0d0d0d;
    font-weight: 700;
  }

  .product__color__select {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    @include transition(all, .5s);

    label {
      display: inline-block;
      height: 12px;
      width: 12px;
      background: #5e64d1;
      border-radius: 50%;
      margin-bottom: 0;
      margin-right: 5px;
      position: relative;
      cursor: pointer;
      
      &.black {
        background: #404a47;
      }
      
      &.grey {
        background: #d5a667;
      }

      &.active {

        &:after {
          opacity: 1;
        }
      }

      &:after {
        position: absolute;
        left: -3px;
        top: -3px;
        height: 18px;
        width: 18px;
        border: 1px solid #b9b9b9;
        content: "";
        border-radius: 50%;
        opacity: 0;
      }

      input {
        position: absolute;
        visibility: hidden;
      }
    }
  }
}