Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 6, 2013 at 5:50 pm #197037
    SonicCube

    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

    December 7, 2013 at 4:04 am #197233
    Josue

    Hey Daniel!

    Try adding this code to the Quick CSS:

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

    Cheers! 
    Josue

    July 21, 2017 at 10:20 pm #825252
    Aerdvark

    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?

    July 23, 2017 at 5:49 am #828580
    Rikard

    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

    July 24, 2017 at 10:30 pm #829236
    Aerdvark

    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!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Round Pictures in Portfolio Grid’ is closed to new replies.