# zoom in on image

**URL:** <https://community.hubspot.com/t/zoom-in-on-image/49035>\
**Category:** Blog, Website & Page Publishing\
**Tags:** how-to\
**Created:** [December 28, 2021, 11:30pm UTC](https://community.hubspot.com/t/zoom-in-on-image/49035 "2021-12-28T23:30:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![CStegh](https://avatars.discourse-cdn.com/v4/letter/c/e68b1a/32.png) [@CStegh](https://community.hubspot.com/u/CStegh)\
**Post date:** [December 28, 2021, 11:30pm UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/1 "2021-12-28T23:30:26Z")

</div>

Hi,

Have you ever been on a blog or website where you hover or click on an image and it expands? Is that possible in a hubspot blog? If so, how, please? Thank you!

---

<div class="post-metadata">

**Author:** ![TitiCuisset](https://avatars.discourse-cdn.com/v4/letter/t/8baadc/32.png) [@TitiCuisset](https://community.hubspot.com/u/TitiCuisset)\
**Post date:** [January 4, 2022, 8:44am UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/2 "2022-01-04T08:44:00Z")

</div>

Hi @CStegh

Thank you for reaching out.

I want to tag some of our experts on this - @tjoyce @JonPayne @Oezcan do you have any thought for @CStegh on this?

Thank you!

Best

Tiphaine

---

<div class="post-metadata">

**Author:** ![Oezcan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/oezcan/32/53959_2.png) [@Oezcan](https://community.hubspot.com/u/Oezcan)\
**Post date:** [January 4, 2022, 8:56am UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/3 "2022-01-04T08:56:48Z")

</div>

Thank you [@TitiCuisset](https://community.hubspot.com/t5/user/viewprofilepage/user-id/89150) for mentioned.  
Hello @CStegh ,  
for hover you can try something like this:

```lia-code-sample
img {
 transition:transform 0.25s ease;
}

img:hover {
 -webkit-transform:scale(1.5); /* or some other value */
 transform:scale(1.5);
}

```

and for klick you can try something like in [this](https://www.w3schools.com/howto/howto_css_modal_images.asp) article from w3school.

Best regards,

Özcan

---

<div class="post-metadata">

**Author:** ![DSylvester](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dsylvester/32/57633_2.png) [@DSylvester](https://community.hubspot.com/u/DSylvester)\
**Post date:** [May 23, 2022, 8:28pm UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/4 "2022-05-23T20:28:45Z")

</div>

where do you add this code?!

---

<div class="post-metadata">

**Author:** ![GiantFocal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/giantfocal/32/41969_2.png) [@GiantFocal](https://community.hubspot.com/u/GiantFocal)\
**Post date:** [August 14, 2024, 6:02pm UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/5 "2024-08-14T18:02:34Z")

</div>

You’ll need to add this to your CSS file.

Deciding which CSS class to target depends on your blog template structure. Check if your target image has a DIV wrapper, or CSS class added.

Best regards,

**Abraham Ernesto**

---

<div class="post-metadata">

**Author:** ![OVincent3](https://avatars.discourse-cdn.com/v4/letter/o/b782af/32.png) [@OVincent3](https://community.hubspot.com/u/OVincent3)\
**Post date:** [October 19, 2022, 4:30pm UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/6 "2022-10-19T16:30:01Z")

</div>

Hello Oezcan,

I already have a page ith a few photos toward the bottom. How do i add this CSS code to apply to these photos? I don’t have access tp the HTML for the page so I don’t see how to apply this CSS to specific photos in the page.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [January 5, 2022, 8:07am UTC](https://community.hubspot.com/t/zoom-in-on-image/49035/7 "2022-01-05T08:07:21Z")

</div>

Hi @CStegh ,

I have found a post on our community forum[here](https://community.hubspot.com/t5/CMS-Development/click-to-enlarge-image/td-p/177704), which offers advice on how to implement this. It looks like you might want to create modal images with CSS and Javascript, there is a helpful guide here that outlines the process!

Hope this helps!  
If we were able to answer your query, kindly help the community by marking it as a solution.  
Thanks and Regard.