This topic has 6 replies, 3 voices, and was last updated 3 years, 1 months ago ago by Olga Barlow
Hi
i tried to use SVG file in my page “Design”. however, the image disappears in preview.
can you please help? https://prnt.sc/1tfrcob
If you want to use .svg , change the Image element to Icon, for example – https://prnt.sc/1tgm244
Regards
hi,
1. i tried Icon box but still could not have the SVG. it appears as icon and when set size (360×360), the image disappears. I also could not set the title to the middle.
2. furthermore, for image box, i would like to create corner ribbon that does not have gap on the sides. see below:
https://prnt.sc/1tsmqg6
Thanks
Hello,
1) I added banner with mask element and it allows to achieve the result you need better that icon box.
2) Add the below custom to remove padding
.mpc-ribbon-wrap {
padding: 0;
}
Regards
Hi Thanks
1. yes that is a better option.
a. how can i use my custom class on this element? this gives a slower zoom effect.
.img-hover-zoom img {
transform-origin: 30% 20%;
transition: transform 1.2s, filter 1s ease-in-out;
}
.img-hover-zoom:hover img {
transform: scale(1.05);
}
b. in tablet sized screen, the image turn to rectangular instead of square with sharp edges. https://prnt.sc/1tx6nga
and in all screen sizes, the img edge sharpen on hover.
what i need is fixed size and rounded edges in all states (normal and on hover).
maybe you have a better suggestion?
Hello,
a) Banner element does not have custom class option. You can add custom class for the column and use it to apply styles for the banner inside this column.
b) Edit banner element and remove the min size for the banner.
c) If you use zoom effect on hover then it won’t have border-radius because it’s image border-radius, not the banner block border-radius. So, you may try to add border radius for the banner element using custom code
.banner {
border-radius: 20px;
}
Regards
The issue related to '‘SVG image’' has been successfully resolved, and the topic is now closed for further responses