Slight design adjustments

[CG_Alex]

Hi,

I have a few small things that I would like to change in a module template i'm using.

Currently the Modal images are rounded, how do I remove this and resize them?

Also, how do I change the size of the clickable are that appears when I hover over the image?

Thanks in advance!

[tjoyce]

@CG_Alex - We can give you a much more detailed and accurate solution if you can provide a preview link to the page so we can play with the CSS a bit.

[CG_Alex]

Hi @tjoyce

How do I do that? sorry I am quite new to HubSpot!

[tjoyce]

@CG_Alex - no problem, when you are editing your page (not the template) on the left side there is an "eye" icon, click that link to preview and paste that link into here.

[CG_Alex]

@tjoyce - thank you!

http://www.convergencegroup.co.uk/meet-the-team?hs_preview=unPQEbVF-6019174899

I will be using a copy of this module for a different page purely for the modal functionality, thats why I'm removing the rounding of the images and changing the sizes of them.

[tjoyce]

Thanks @CG_Alex - To remove the circle on the image, you could drop this css into your css file:

div .team-member-wrapper img {
  border-radius: 0;
}

and you can expand on that to make them bigger with:

div .team-member-wrapper img {
  border-radius: 0;
  max-width: 60%;
}

I'm not sure what you mean by making the clickable area bigger because, when I hover the image, there is a large surface area.

---

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 brilliant that is perfect thank you!

In repect to the size changes, I wanted to make the box that appears when you hover over the image smaller if possible (There wont be as much information in the new modules) 

[tjoyce · Accepted solution]

thanks for the clarification @CG_Alex - to decrease the size of those boxes, you can add the following CSS

.team-member-wrapper.team-half {
    padding: 80px;
}

---

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]

Perfect, thank you for all your help @tjoyce