product page design

[Kathy518]

Hi,

I am doing the product page design.  I want to get the image like circle 10 for each corner, not a exact square. And image size become bigger.  However, I didn't find the image shape and size that I can change.  Can someone help? I think I may need the coding help. Thank you. I attached the example below. 

My store: https://www.trumili.com/, theme is impluse.

[Kyle_liu]

Hi  @Kathy518 

You can edit theme code:

1.

2.selected  Default product

3.click product section

4

5. add css code

.image-wrap {
  background: var(--colorSmallImageBg);
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

Adjust the value of 'border-radius'

[Kathy518]

Hi Kyle,

Thank you for the response. I think the position may get wrong. I want the section "image with text" that shape become a circle 10° . I attached the screenshot below. Thank you

[Kyle_liu]

Still following the above steps, add this style

.svg-mask {
  background: transparent !important;
    background-color: transparent;
  background-color: transparent !important;
  padding-bottom: 100% !important;
  position: relative !important;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  margin: 15px;
}

and the code that works is as follows:

 box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
border-radius: 20px;
margin: 15px; 

[Kathy518]

Hi Kyle,

Thank you for the response. I think we have some misunderstanding.   

The shape of the image I want is the one you created, a square with rounded corners. I don’t need the polygon inside. Thank you

[Kyle_liu]

.svg-mask {
  background: transparent !important;
    background-color: transparent;
  background-color: transparent !important;
  padding-bottom: 100% !important;
  position: relative !important;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  margin: 15px;
}
.svg-mask--splat-1 img, .svg-mask--splat-1 svg:not(.icon), .svg-mask--splat-1 video {
  -webkit-mask-image: url;
  mask-image: url;
}

[Kathy518]

Hi Kyle,

Thank you for helping? Is it possible to delete the inside image shape? I attached the example below. Thank you

[Kyle_liu · Accepted solution]

Hi  @Kathy518

This has already removed the style of the internal border, and compared to the first reply, some new code has been added. The effect is the same as the screenshot you provided.

.svg-mask--splat-1 img, .svg-mask--splat-1 svg:not(.icon), .svg-mask--splat-1 video {
-webkit-mask-image: url;
mask-image: url;
}

.svg-mask {
  background: transparent !important;
    background-color: transparent;
  background-color: transparent !important;
  padding-bottom: 100% !important;
  position: relative !important;
  box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  margin: 15px;
}
.svg-mask--splat-1 img, .svg-mask--splat-1 svg:not(.icon), .svg-mask--splat-1 video {
  -webkit-mask-image: url;
  mask-image: url;
}

[Kathy518]

Thank you Kyle. It works!