How to make image enlarge on double click

[Hitoshi Ozawa]

I'm inserting a image as a thumbnail in an article and want the image to show up in original size when it is double clicked.

I see some images in ServiceNow educational courses that'll expand when I click on it.

Currently, if I just insert an image as a thumbnail, it won't expand on double-click. Would appreciate if someone would show me how to expand the image on double click.

[Harsh Vardhan]

images has been used on knowledge article html field ? you can apply some css to expand it. 

eg:

https://stackoverflow.com/questions/25036597/how-to-enlarge-an-image-on-hover-or-click

[Hitoshi Ozawa]

Can you show me the actual steps that I need to do on ServiceNow?

I know HTML and CSS but just starting on ServiceNow. I've found that I can edit HTML source code of the article I'm writing but not sure how to add css styles to it.

I've attached the images to the article. Is this the way to do it or do I have to upload it somewhere else?

[Harsh Vardhan · Accepted solution]

in source code you will apply something like below 

Screenshot :

<p>Scrolling text</p>
<p>&nbsp;</p>
<div class="imageContainer"><img src="setValue%20in%20ui%20page.pngx" width="700" height="650" /></div>
<style>
.imageContainer > img:hover {
width: 500px;
height: 200px;
}

</style>
<p>&nbsp;</p>
<p>&nbsp;</p>

Note: "setValue%20in%20ui%20page.pngx" : this would your image 

make the changes in style based on your need. 

if my answer helped you , kindly mark it as correct and helpful.

[Hitoshi Ozawa]

Thanks. That's what I wanted.

I can just enter the css in the html.

Just replaced with width and height to use % so I'll get proportional sizing.

i.e.

height:70%;

width:70%;