Image select radio buttons

[ianforest]

Hi there,

I am trying to use images instead of radio buttons.

I have followed some CSS found here, and whilst it works ok, I want to move the option label to the OUTSIDE of the image, directly underneath it, left aligned, rather than on a gradient inside the image.

The form is located at https://23.bigsmilebooth.com/options

Can anyone help, please?

• This topic was modified 1 year, 8 months ago by ianforest.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[ianforest]

Hey Allan, thank you for your help much appreciated. Doing this has created a new problem however…

When I select an image, the text underneath now shifts over to the right…

This is the CSS I am using for “option text”

position: absolute;
bottom: -40px;
padding-bottom: 5px;
text-align: left;
text-transform: uppercase;
font-weight: 900;
color: #000;
font-size: 15px;

And the only style for anything selected I am using is “option label (when selected)” and this is for styling the check icon that appears inside the image…

border: 5px solid rgb(137, 199, 18);
box-shadow: 0 0 15px rgba(137, 199, 18, 0.2), inset 0 0 15px rgba(137, 199, 18, 0.2);

Thank you for your help.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[ianforest]

Perfect, thank you so much! All seems to be ok.

I also have a couple of other queries…

When I look at the form I’ve created with a phone or tablet, even though the images are stacked, because I’ve specified a height in the image options, they all appear at that height.

Ideally, I need them all to show in the correct ratio which is 3/2.

Is there anything I can do so that they resize all automatically in the correct ratio irrespective of what device is being used to view them?

Thank you.

[Allan]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts