zoom in on image

Marketing & Content Hub Blog, Website & Page Publishing
1

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!

2

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

3

Thank you @TitiCuisset for mentioned.
Hello @CStegh ,
for hover you can try something like this:

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 article from w3school.

Best regards,

Özcan

4

where do you add this code?!

5

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

6

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.

7

Hi @CStegh ,

I have found a post on our community forum here, 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.