Okay
  Public Ticket #2783968
Round Image
Closed

Comments

  •  3
    ricrucial started the conversation
    May 23, 2021 at 4:23am

    The single image settings only lets you make the radius 20px... I would like to make the image completley round. Is there a way to do this?

    Thank you!

  •  279
    Noah replied
    May 23, 2021 at 6:47am

    Hi there,

    Thanks for contacting us.

    Add a Square Image to get a Circled Image. Also try using a Single Image Page Element instead of circling the Column Background.

    Thanks, 


  •  3
    ricrucial replied
    May 23, 2021 at 7:42am

    The image is square and it is in a single image page element, I commented that the border radius settings in the single image page element only allows for up to 20px radius. I would like the image to have a 50% radius which would make it a circle.

  •  279
    Noah replied
    May 23, 2021 at 7:59am

    Hi there,

    Thanks for keeping in touch.

    You can achieve the feature using the css border-radius, please share the link to the page so that I can create the custom css for the image.

    Thanks,

  •  3
    ricrucial replied
    May 23, 2021 at 8:01am

    Can you please just give me the CSS code here.


    Thank you

  •  279
    Noah replied
    May 23, 2021 at 8:06am

    Hi again,

    Please share the url to your site so that I can write the css.

    Thanks,

  •  3
    ricrucial replied
    May 23, 2021 at 8:11am

    I don't understand why you can not just give me the code here? and I can add it myself? I dont want this effect on all images just certain ones...

    here is the log in:

    user - [email protected]

    pw - ThemeNectar20@!

  •  279
    Noah replied
    May 23, 2021 at 8:25am

    Hi,

    My apologies, thank you for the credentials but  I am request ing for your website url link.

    Please share.

    Thanks,

  •  3
    ricrucial replied
    May 23, 2021 at 8:27am

    development.pixelpuremedia.com

  •  279
    Noah replied
    May 23, 2021 at 8:36am

    Hi again,

    Please use the css below:

    .img-with-aniamtion-wrap .hover-wrap .hover-wrap-inner img.img-with-animation{
border-radius: 50%;
}

    Let me know how it goes.

  •  3
    ricrucial replied
    May 23, 2021 at 8:42am

    Thank you, This worked, but as i commented before I do not want this to be for every image in the site... I have other single images that I do not want to have round.

  •  279
    Noah replied
    May 23, 2021 at 8:45am

    Hi,

    Glad that it worked. To separate the images with border-radius and the ones which won't have, you will have to customize the classes. For instance when adding an image with a border-radius give it the class with the border-radius css and for the others give it a class with border-radius set to zero.

    Thanks,

  •  3
    ricrucial replied
    May 23, 2021 at 8:49am

    Thank you! I am not 100% sure how to do this can you help me with this?

  •  3
    ricrucial replied
    May 23, 2021 at 9:16am

    Can someone help with this please?

  •  1,878
    Judith replied
    May 23, 2021 at 9:37pm

    Hi There,

    How about you tried, 

    .img-with-aniamtion-wrap .hover-wrap .hover-wrap-inner img.img-with-animation {
        border-radius: 50%;
    }

    Thanks.