Modal changes

[CG_Alex]

Hi,

Im trying to change the size of the clickable area for the modal image on this page (to fit around the logo and the text). As you may notice also, the popup image is also too big and crops most of it out.

https://www.convergencegroup.co.uk/meet-the-team-3?hs_preview=WlVXdZUd-6065978604

How do I change these?

[tjoyce]

@CG_Alex - Did you get the clickable area working? I see a large clickable box when you hover that seems to be working fine.

As for the image... If those are going to all be logos, I would ditch the background-size:cover and go for contain instead.

.o-modal__team-image {
    height: 700px;
    background-position: 50% 50%;
    background-size: cover;
    background-size: contain;
    background-repeat: no-repeat;
}

---

If this answer helped, please, mark as solved 😄

---

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.

[CG_Alex]

@tjoyce - Hi, the clickable area is working again, but I'd like the actual area of the clickable box to me smaller (just big enough for the logo and the name to fit into). Im not sure if I have put your new code in the right place for the pop up image size? I can't seem to get it to apply properly.

[tjoyce · Accepted solution]

@CG_Alex - The css you want to play with to change the box trigger size is in the following screenshot

It can be tricky sometimes to inspect values of a hover css property so, when you're in inspector, toggle on the hover to help yourself out... see the following screenshot: