Node Image Shapes?

[hromain]

Hi,

Is it possible to edit the shape of node images? I'd like to make mine circular but don't see an option for adjusting the radius like there is with rectangles. I tried adding a "border-radius" property in the CSS, but it only makes a circle behind the node image and doesn't affect the shape of the image itself.

[mbb]

put the following into the "CSS Styles:" field in the Node Image Advanced Properties:

overflow: hidden; border-radius: 50%;

[hromain]

That's just what I was looking for, but here's one quick follow up: now, the tooltip is overflowing the rounded border of the node image. Is there a way to make it match the border of the node image without covering the image completely? I want to keep it looking like this image:

[mbb]

Sorry, I have no idea what you are talking about now.

Do not know what you mean by "tooltip is overflowing the rounded border of the node image"

[hromain]

Apologies for the confusion. I've attached a screenshot to illustrate. Ideally, I'd like the tooltip background to end at the circular border of the node image instead of how it sits now.

[Hopki]

Hi,
In V5 or 6 use a masking container with the following CSS.

CSS for the container that is set to making::

Code: Select all

overflow: hidden; border-radius: 50%; border-style: solid; border-width: 2px

Working project attached.

Regards,
Hopki

[hromain]

Perfect. Thank you!

[Tony]

Hi Hopki,

Thanks for the skin. Nice addition to my collection of Hopki inspired skins

cheers,

Tony

[Hopki]

And just because I can
Here its using a timer and animated rectangles as well as fade in the preview and tooltip text.
Regards,
Hopki