Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #197037

    Hello Support Team

    i’d like to have the portfolio grid / preview images to be round and tried this in the quick css without any effect :

    .grid-image {border-radius: 100px;}

    Any idea how to achieve this, and for sure the hover fx as well :)

    Thank you for your help




    Hey Daniel!

    Try adding this code to the Quick CSS:

    .grid-image.avia-hover-fx {
        border-radius: 100px;
        overflow: hidden;



    Sorry for bringing up an old thread, hope it is okay.

    I want to make my portfolio grid items round as well,
    But if the original featured image is not square the image will not get round.
    So I figured out this one:

    .grid-image.avia-hover-fx {
        border-radius: 100px;
        overflow: hidden;

    But the result is the same basically.
    The only advantage from this solution is that the image size is not dependend.

    Is there a way to have the image round / circle regardless if the original image is square or rectangularo or whatever?


    Hi Aerdvark,

    I think it’s difficult to achieve that using CSS only, it’s much easier having a properly sized image to start with. You could try placing the image as a background to the element but I think it will be difficult still.

    Best regards,

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.