Move image description one layer up

Hello,
i made a custom css code that the Image description from a Picture is displayed in a circle on the right:

It will Display the text like this on the Picture:

Now i want to crop all Pictures on the site to the same size. I used the Overflow function. But now the circle gets cut offf:

Is there a way to show the whole circle?
Here is my css code:

.page-id-310 .av-image-caption-overlay-center p {
top: 60px;
left: 165px;
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
font-size: 25px;
line-height: 110px;
text-align: center;
background: #A67C52;
color: white;
font-weight: bold;
CSS-moz-transform: rotate(-20deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}

.page-id-310 .avia-image-container-inner {
width: 288px;
height: 162px;
overflow: hidden;
}

I allready tried to use the z-index function but didn’t get it to work.

Can someone help me please?

• This topic was modified 7 years ago by Jannis95.