I figured out the cropping, just the zoom doesn't seem to be working.

1. It would be much easier to investigate if you create a simplified example without all the nested templates and clever tricks.

2. I believe .icon img matches nothing because a class added inside the [[File: syntax is added to the img elements itself, so it's either .icon or img.icon

3. You should also limit the styles to a more unique class name (or with a unique wrapper), otherwise you might accidentally affect elements with the same class name even outside the dedicated template.

I will make a unique name this is a test.

Well I need it to work in that table,, getting it to work outside simplified isn't going to help me.

Ok yeah it was .icon img scale just moved to the .icon did it. I based this from another templatestyle what worked, I guess this one was easier and didn't need the two.

Ok, now that it is cropped the cell is remaining the same size as if it wasn't cropped, I am not sure how to fix that I have overflow hidden.

The size of the cell isn't supposed to be affected by the cropping, cropping just makes part of the image transparent. What exactly are you trying to do?

Crop-clip the image with css so the cell can readjust to the new crop size, instead of having to crop the image in a program and reupload.

Crop-clip works in a similar situation/template css (or else that right hand template would have lots of negative space). But I didn't know how to replicate in the new table.

https://lir-test.fandom.com/wiki/Skill_Page

https://lir-test.fandom.com/wiki/Template:Overview

https://lir-test.fandom.com/wiki/Template:Overview/styles.css

In your example, there's a <div> around the image, that div has a set width and height and overflow: hidden, and this is what cuts into the image size. The clip-path there only gives it the shape of a circle, it has no effect on the space it takes.

You can use the same approach with the other template. Alternatively, you can reduce the images's size by using negative margins. This should actually play nicely with your clip-path approach:

margin-top: -7px;
margin-bottom: -9px;
clip-path: inset(7px 0 9px 0);

Oh beautiful, thank you!