Discover how to make an image zoomable in Atomic Assessments using the source code.
To make an image zoomable in Atomic Assessments follow these steps:
-
Go to the item in Atomic Assessments where the image is stored and go to SOURCE
Figure 1: Opening the source code for an item -
Where it says
<img height="530"... you want to paste class="zoomable-image" between img and height to say <img class="zoomable-image" height="530"... -
From there you want to add the following CSS to the Course Settings CSS page:
.zoomable-image { width: 300px; / *Set the desired width* / transition: transform 0.3s ease; / *Smooth transition* / } .zoomable-image:hover { transform: scale(1.2); / *Zoom in on hover* /}
You can then adjust the_px_value of the image when zoomed in.