Sometimes you need to display a little image and to be able to temporarily enlarge it. Here are two ways to do it:

• Solution n°1: a solution which only uses CSS
• Solution n°2: a solution using javascript

Example

Suppose you want to enlarge an image in the reading container. When creating your exercice, add your image to the reading container using Insert media object. You will get something like that:

<img src="myimage.jpg" alt="myimage.jpg" title="myimage" width="270" height="185" style="display: block; margin-left: auto; margin-right: auto; text-align: center;"/>

Then add a class to your image:

<img class="rttoenlarge" src="myimage.jpg" alt="myimage.jpg" title="myimage" width="270" height="185" style="display: block; margin-left: auto; margin-right: auto; text-align: center;"/>

Then in Options>Configure output>Custom>Code for insertion into head tag, add:

<style>
img.rttoenlarge{
text-align: center;
transform-origin: top left;
transform: scale(1);
transition: 1.5s ease-in-out;
}
img.rttoenlarge:hover {
transform-origin: top left;
transform: scale(4);
position: relative;
z-index: 100;
}
</style>

For more information, see transform and Using CSS transforms

Example

See the tutorial.