I'll bring up a reply that I have written in a similar topic. A box topper in the case of the example you have provided could be using a mix of absolute positioning and top property.

position:absolute;
margin:[input desired length in px, etc]

But you will have to be quite specific with targeting the CSS selectors you have in your stylesheet. You will have to increase the margin on top of the box where the box topper will be sitting on. Then you will have to use absolute positioning to 'command' where the image is going to sit. To explain a bit more, position:absolute ignores normal webpage flow, and no space is allocated to it. So to address it, you have to use a combination of margin and even padding in some cases to get what you want.

(Also to take note: Because different devices have different dimensions, you also should consider @media and test across different devices to make sure the box topper is consistenly sitting on the boxes.)

Hopefully it helps!


EDIT: I went into your code to see how I can get your lioness to sit on your box. Adding this code should help.
.smallbox img {
position: absolute;
margin-left: -250px;
}

You have liked this post!

It's helping stop the clipping for sure, tysm! I just have to work on positioning it correctly I think :3

You have liked this post!

I have the same question on how to add one

You have liked this post!