Rounded image

Support
#1

Hello,

I do have a following idea which I would like to implement but no clue how this can be realized with Cornerstone:

  • I would like to insert an image into a new section (this is clear)
  • The image should appear round formed; this means, only a round shape in the middle of the image should be shown: how to achieve this?
  • Below, I would like to insert a button for an action (this is clear)
  • When mouse pointer goes above the rounded image or above the button, the visible round shape in the middle of the image should become bigger: how to achieve this?

Is this possible to realize? Any hint highly appreciated!

Best regards,

–Mardas

#2

Hello Mardas,

You may use the Classic Image element for this then set the style to rounded.

This is possible with some customization. I suggest adding a class to the image and button elements.

Then you can target the elements using the class you have added then write a custom CSS that enlarges the image when hovered.

These links should help:

Hope this helps.

#3

Dear Jade,

This is very helpful, many thanks for the explanation!

I guess I can change a shape of an image also with a class. In case I would like to do a circle shaped image, I am entering into the class field:

class=“img-circle”
or
img-circle

but there are just no changes.

What do I have to enter into the class field to make an image circle shaped?

Best regards,

–Mardas

#4

Hello Mardas,

You should place only the class name in the class field for example img-circle and not class="img-circle".

And to reference it using CSS, it should be:


.img-circle {

}

Then you can make use of the border-radius:

Hope this helps.

#5

Dear Jade,

Many thanks for your explanation. After entering

img-circle; border-radius: 10px; border: 3px solid #BADA55;

into the field “Style” I am getting following results, s. below. Somehow the image is not quite a circle.

Entering the code above into the field “Class” does not change anything.

What I am doing wrong?

Best regards,

–Mardas

#6

Hello Mardas,

Thanks for updating the thread. :slight_smile:

Please try adding following CSS in style text box and let us know how it goes:

    border-radius: 150px;
    border: 3px solid #BADA55;

In case output is not as per requirement, please share exact page URL for us to take a closer look.

Thanks.

#7

Hi,

thanks for your answer. Somehow all this does not work as I would like to have:

I am inserting a picture and I would like to make the picture circle-shaped. Now, the inserted picture looks like this:

After applying style: circle the picture looks like this. As you can see, it is rounded but it is still not circle-shaped:

The question is simple: How can I do the inserted picture circle shaped? I would like that only the inside of the red circle to be visible:

How can I achieve this?

–Mardas

#8

Hi Mardas,

There are few thing to consider here.
Directly using border will not right away achieve what you want if the image is not square. If the image is square, this CSS will work:

border-radius: 50%;

The image above is definitely rectangle thus you’re getting that result. Try to use square image. There are also an alternative like adding the image as column background and making set width and height. See this: https://screencast-o-matic.com/watch/cq1uXeTSB8
The drawback is we still need to set definite height and width to make sure it is square. Best alternative is to use square image to make sure it is responsive.

Hope this helps.

#9

Hi,

this helps very well! I need then a CSS which makes from a rectangle image a square image. It would be great if you could tell me how to do this with CSS.

This would be great and the topic would be completed.

Many thanks in advance!

#10

Hi Mardas,

Please note that the support we provide is limited to questions about the theme setup and bug reports. The questions you are asking is more of how to be able to set things up through CSS since the functions you are asking does not come native to the theme.

It would be best to do some research from this point on how you would be to have these implemented on your site.

Here are some google search results that might help you get started.

Hope this helps.

#11

Hello,

Thanks for replying. I am not looking for a css coding, it is rather about the functionality of the Cornerstone. You see, the wp backery is able to do a square from a rectangle without any manual css without nothing. Unfortunately, the Cornerstone not.

I would like to build the X pages with the Cornerstone because of better integration with the theme etc. but for this a workaround is just necessary…

Best,

—Mardas

#12

Hi Mardas,

Any feature that is not available out of the box with X and Cornerstone falls beyond the scope of our support as it requires customization. That is including how to make a rectangular image display as square. Also, WP Bakery and Cornerstone are two separate page builders. Some features of either of them might not be available in the other.

However, this is something I could add to our Feature Request List so that it will be considered in future development.

Thank you.

#13

Hi,

Please do this.

#14

Hi Mardas,

The feature request has been added and our developers are already made aware of.

Regards.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.