Hover Image

[sriggs9110]

Hello,

I have setup my menu images under the “How We Roll” section to change to a different image upon hover. You will notice the hover image is very zoomed in, how can I fix this? Also how can I set the same dimensions for all photos that will be in that grid I am creating?

Thank!
pcricecream.com

[Prasant]

Hello Stephen,

Thanks for asking.

First, I suggest you to add a class to the Column element under Customize > Setup > Class. Here’s a screencast that you can take a look.

After that please add following CSS under X > Theme Options > CSS:

.class-name{
background-size: 95%;
} 

Please change the class name. And add the class name to all 3 columns.

To learn more about background size property, please take a look at following resource.

https://www.w3schools.com/cssref/css3_pr_background-size.asp

Thanks.

[sriggs9110]

@Prasant

.class-name{
background-size: 95%;
}

I added this in but it did not seem to fix the problem. Inside of cornerstone editor it looks correct, but when looking at the site live it is not correct. It was like that prior to entering your code as well.

[mldarshana]

Hi Stephen,

The first issue I see on your site is that you have updated Cornerstone plugin to the latest version and you’re using an older version of X theme which could create incompatibility issues. You can see the latest versions and update related information from here (https://theme.co/changelog/). Then you can update your X theme accordingly (https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62) and see if that helps.

If you’re still having issues, provide us with the URL to your example page to check your issue further.

Also if you’re using a caching plugin, make sure to purge server cache and also clear browser cache before testing.

Let us know how it goes.
Thanks!