Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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

    Regards

    Daniel

    #197233

    Hey Daniel!

    Try adding this code to the Quick CSS:

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

    Cheers! 
    Josue

    #825252

    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?

    #828580

    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,
    Rikard

    #829236

    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.