How To Add Click To Zoom To Your Knowledge Base Images
To enable click to zoom option follow these steps:
-
Login to your Helpjuice account
- Go to your customization tool -> main layout and at the end of the file just right before {{ main_js }} paste this code {{ click_to_zoom_js }} and save the file.

- After that go to your Main CSS file and at the end of that file paste the code below
/**************** Popup Image *******************/
div.popup-image {
position: relative;
overflow: hidden;
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,.6);
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
cursor: pointer;
transition: transform .5s ease;
font-weight: 600;
}
img {
transition: transform .5s ease;
cursor: pointer;
height: auto;
max-height: 150%;
}
&:hover {
img {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
.overlay {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
}
&.active {
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,.2);
width: 100%;
height: 100%;
z-index: 999;
text-align: center;
padding: 5%;
overflow-x: hidden;
overflow-y: auto;
.overlay {
opacity: 0;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 90%;
width: auto;
margin: auto!important;
animation: scaleImage .5s ease-in-out;
@media (min-width: 1200px) {
max-width: 80%;
max-height: 80vh;
}
@media (min-width: 1440px) {
max-width: 1400px;
}
}
&:hover {
img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
}
}
@keyframes scaleImage {
0% {
-webkit-transform: scale(0.0);
-moz-transform: scale(0.0);
transform: scale(0.0);
}
100% {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
transform: scale(1.0);
}
}
}

Hit Save and now you should be able to see click to zoom option.