Hi all,
Maybe a trivial question, but I'd like to ask how to make a image zoom-in and out like the way we have in any of the Outsystems document.
For example: https://success.outsystems.com/documentation/11/building_apps/user_interface/screen/
The desired behaviors:
I have a feeling that this can be done with CSS, but I'm not sure.
Thank you
Hello,
You can open developer tool from your browser and check CSS used for the image that you posted here in your question when you click it to zoom in an zoom out.
I found these two CSS which are used for the image:
Normal image:
img.fr-dib {
display: block;
float: none;
vertical-align: top;
}
After click image (zoom in)
.zoom {
border: var(--border-size-s) solid #9E9E9E;
border-radius: var(--border-radius-mid-rounded);
cursor: -webkit-zoom-out;
max-width: 100%;
transform: scale(2);
transition: all 0.5s;
z-index: 100;
Thank you very much. Your solution is indeed what I imaged.
Although you have given me a hint for thinking, @Gorantla Srujan Kumar supported me with a working .oml file. Therefore I'd like to also credit him as a solution.
Best regards,
Hello @Cuong Tran
kindly refer this OML
Thanks
Hi,
You can also use below forge component for zooming facility.
https://www.outsystems.com/forge/component-overview/10275/image-magnifier-glass-o11
Cv