Viewing 5 posts - 1 through 5 (of 5 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,


    Hi Rikard,

    Of course you are right, I should start by using the right materials in order to create a good product.
    My question may be denied / marked as solved.

    Thanks for the quick reply and your support!

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

The topic ‘Round Pictures in Portfolio Grid’ is closed to new replies.