Currently Empty: ₹0.00
Loading...
Product Name 01
Product Name 02
Product Name 03
Product Name 04
Product Name 05
Product Name 06
Product Name 07
Product Name 08
Product Name 09
Product Name 10
Best Product
Post Buy Requirement
Tell us what you need. We will help you get a quote.
/* ================================
MY PRODUCT - CIRCLE PRODUCT STYLE
CSS ID: my-product
================================ */
/* Product box */
#my-product .product {
text-align: center;
position: relative;
}
/* Product image area */
#my-product .product-thumbnail,
#my-product .product-image,
#my-product .image {
display: flex;
justify-content: center;
align-items: center;
}
/* Make product image circular */
#my-product .product-thumbnail img,
#my-product .product-image img,
#my-product .image img {
width: 160px;
height: 160px;
object-fit: cover;
border-radius: 50%;
display: block;
margin: 0 auto;
transition: all 0.3s ease;
}
/* Hover effect */
#my-product .product:hover img {
transform: scale(1.05);
}
/* Product title / category below image */
#my-product .product-title,
#my-product .name,
#my-product .product-name {
margin-top: 15px;
text-align: center;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
}
/* Links */
#my-product .product-title a,
#my-product .name a,
#my-product .product-name a {
text-decoration: none;
color: #222;
}
/* Hover link */
#my-product .product-title a:hover,
#my-product .name a:hover,
#my-product .product-name a:hover {
text-decoration: none;
}
/* Mobile */
@media (max-width: 767px) {
#my-product .product-thumbnail img,
#my-product .product-image img,
#my-product .image img {
width: 120px;
height: 120px;
}
#my-product .product-title,
#my-product .name,
#my-product .product-name {
font-size: 15px;
margin-top: 10px;
}
}