ljmediahouse
2/10/2020 - 8:57 PM

Custom Product Displays

---CUSTOM Product Displays---

.sqs-block-product:hover {
  .productDetails {
    background: transparent;
    .product-title, .product-price {
      opacity: 0;
    }
    .sqs-editable-button {
      background: rgba(250,250,250,0.3);
    }
  }
  .image-container {
    img {
      transform:scale(1.3);
      -moz-transform:scale(1.3);
      -webkit-transform:scale(1.3);
    }
  }
}
  .sqs-block-product {
  padding: 2;
.image-container {
  overflow: hidden;
  img {
      -moz-transition: all ease-in-out 300ms !important;
      -webkit-transition: all ease-in-out 300ms !important;
      transition: all ease-in-out 300ms !important;
  }
}
  .productDetails {
      -moz-transition: all ease-in-out 300ms !important;
      -webkit-transition: all ease-in-out 300ms !important;
      transition: all ease-in-out 300ms !important;
    top: 0;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: rgba(250,250,250,0.5);
    padding: 0px;
    .product-title {
      position: absolute;
      left: 20px;
      top: 20px;
      margin-top: 0;
    }
    .product-price {
      position: absolute;
      left: 20px;
      bottom: 20px;
      margin-bottom: 0;
      text-align: right;
    }
    .sqs-editable-button {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
}
@media ( max-width : 667px ) {
  .sqs-block-product {
    .productDetails {
      top: 25px;
      left: 8px;
      right: 8px;
      bottom: 25px;
    }
  }
}
.text-align-center {
  display: table !important;
  width: auto !important;
  margin: auto !important;
}