---
title: "How To: Make an image zoomable"
description: Discover how to make an image zoomable in Atomic Assessments using the source code.
---

[Skip to content](https://support.atomicjolt.com/knowledgebase/how-can-i-make-an-image-zoomable#main-content)

English

Show submenu for translations

[File a Support Ticket](https://support.atomicjolt.com/knowledgebase/kb-tickets/new?hsLang=en) [Customer Portal](https://support.atomicjolt.com/tickets-view?hsLang=en)

![Atomic Jolt Logo Horiz Small](https://support.atomicjolt.com/hs-fs/hubfs/Atomic%20Jolt%20Logo%20Horiz%20Small.png?width=260&height=95&name=Atomic%20Jolt%20Logo%20Horiz%20Small.png)

- [Release Notes Sign Up](https://share.hsforms.com/1iZCRfUF5QHeWYwcLC3bwEAdk6gc)

Open main navigation

Close main navigation

- [Release Notes Sign Up](https://share.hsforms.com/1iZCRfUF5QHeWYwcLC3bwEAdk6gc)
- English
  
  Show submenu for translations
- [File a Support Ticket](https://support.atomicjolt.com/knowledgebase/kb-tickets/new)
- [Customer Portal](https://support.atomicjolt.com/tickets-view)

 How can we help you?

- There are no suggestions because the search field is empty.

1. [Atomic Jolt Knowledge Base](https://support.atomicjolt.com/knowledgebase?hsLang=en)
2. [Atomic Assessments](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en)
3. [Advanced Features](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#advanced-features)

# How To: Make an image zoomable

## 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:

1. Go to the item in Atomic Assessments where the image is stored and go to **SOURCE**
   
   ![Opening the source code for an item](https://support.atomicjolt.com/hs-fs/hubfs/Screenshot%202024-08-16%20at%207.39.40%20PM.png?width=688&height=265&name=Screenshot%202024-08-16%20at%207.39.40%20PM.png)  
   *Figure 1: Opening the source code for an item*
2. 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"...*
3. 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.

- [Atomic Jolt Customer FAQs](https://support.atomicjolt.com/knowledgebase/atomic-jolt-customer-faqs?hsLang=en)
- [Atomic Assessments](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#main-content)

    - [Release Notes](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#release-notes)
    - [Authoring Assessments](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#authoring-assessments)
    - [For Nursing](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#for-nursing)
    - [Content Management](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#content-management)
    - [Question Types](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#question-types)
    - [Grading & Feedback](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#grading-feedback)
    - [Reports](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#reports)
    - [Import and Export](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#import-and-export)
    - [Advanced Features](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#advanced-features)
    - [Proctoring](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#proctoring)
    - [Installation Guides](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#installation-guides)
    - [FAQ for Atomic Assessments](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#faq-for-atomic-assessments)
    - [Adaptive Assessments](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#adaptive-assessments)
    - [Learning Standards](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#learning-standards)
    - [Brightspace](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#brightspace)
    - [Canvas](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#canvas)
    - [Publishers](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#publishers)
    - [Admin Features](https://support.atomicjolt.com/knowledgebase/atomic-assessments?hsLang=en#admin-features)
- [Atomic Search](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#main-content)

    - [FAQs](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#faqs)
    - [Using Search](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#using-search)
    - [Admin Features](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#admin-features)
    - [Content Indexing](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#content-indexing)
    - [Reports & Analytics](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#reports-analytics)
    - [Brightspace Support](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#brightspace-support)
    - [Canvas Support](https://support.atomicjolt.com/knowledgebase/atomic-search?hsLang=en#canvas-support)
- [Atomic Journals](https://support.atomicjolt.com/knowledgebase/atomic-journals?hsLang=en#main-content)

    - [Course Authors](https://support.atomicjolt.com/knowledgebase/atomic-journals?hsLang=en#course-authors)
    - [Student Experience](https://support.atomicjolt.com/knowledgebase/atomic-journals?hsLang=en#student-experience)
- [Atomic Polls](https://support.atomicjolt.com/knowledgebase/atomic-polls?hsLang=en#main-content)

    - [Course Authors](https://support.atomicjolt.com/knowledgebase/atomic-polls?hsLang=en#course-authors)
    - [Student Experience](https://support.atomicjolt.com/knowledgebase/atomic-polls?hsLang=en#student-experience)
    - [Course Copy](https://support.atomicjolt.com/knowledgebase/atomic-polls?hsLang=en#course-copy)
- [Atomic Discussions](https://support.atomicjolt.com/knowledgebase/atomic-discussions?hsLang=en#main-content)

    - [Course Authors](https://support.atomicjolt.com/knowledgebase/atomic-discussions?hsLang=en#course-authors)
    - [Student Experience](https://support.atomicjolt.com/knowledgebase/atomic-discussions?hsLang=en#student-experience)
- [Atomic Author](https://support.atomicjolt.com/knowledgebase/atomic-author?hsLang=en)
- [Atomic Socialize](https://support.atomicjolt.com/knowledgebase/atomic-socialize?hsLang=en#main-content)

    - [Release Notes](https://support.atomicjolt.com/knowledgebase/atomic-socialize?hsLang=en#release-notes)
- [Atomic Curriculum Analysis Tool](https://support.atomicjolt.com/knowledgebase/atomic-curriculum-analysis-tool?hsLang=en)

[![Atomic Jolt Logo Horiz Small](https://support.atomicjolt.com/hs-fs/hubfs/Atomic%20Jolt%20Logo%20Horiz%20Small.png?width=164&height=60&name=Atomic%20Jolt%20Logo%20Horiz%20Small.png "Atomic Jolt Logo Horiz Small")](https://www.atomicjolt.com)

Copyright © 2025, Atomic Jolt