Width Issues on Hover Effects

Support
#1

Hello,

I put a hover effect on rows in X Pro.
The problem i’m having, is that even those i’ve restricted the width of the rows to not take up 100% of the screen on multiple screen widths, the hover effect goes 100%.

I want the hover to just lift up the specified width areas, and not all the extra space to the left and right.
Any idea on a solution to that?

Demo URL: https://usatcorp.wpengine.com/about-us/our-process/
Demo User: demo
Demo Pass: 3c2bd7631efc

Thank you!

Jesse

#2

Hello Jesse,

My apologies but I am not certain if I get what you are referring to? Do you mean that the entire rows’ width increases when you hover to those rows? If so, this is likely to happen because you are using the scale transform effect.

If you want the width to remain as is, what you can do it on hover, you can scale the row contents such as the image and the text itself and not the entire row.

Hope this makes sense.

#3

I want the entire row contents to scale on hover. But what I’m saying is my row is comprised of columns that add up to less than 100% width. However when i hover, a 100% width effect is observed. I could make the contents scale individually, but i want the image and text columns to scale together upon hover, which is why the effect was applied to the row and not the individual components.

#4

Hello Jesse,

I have checked your page and you added black-shadow class to your row. This class were then used in the custom css:

.black-shadow:hover{
    transform: scale(1.1);
}

.black-shadow:hover {
    -moz-box-shadow: 0 0 10px #5a5b5b;
    -webkit-box-shadow: 0 0 10px #5a5b5b;
    box-shadow: 0 0 10px #5a5b5b;
}

Keep in mind that the maximum width of the row is 1200 pixels. As you hover over the row, the width becomes 1320 pixels because it is exactly 110% of the current width. This is the result of the transform: scale(1.1); statement in your css.

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Thank you for your understanding.

#5

Sounds like i should be able to change the max width of the row. Can you help me with that?

#6

Never mind, i just switched to the pro Grid element and applied the scale effect to the grid instead of the row. It works just as intended as long as the column the grid is within is 90% of max-width. I did a poor job at explaining what i was hoping to achieve, my apologies.

#7

Hey Jesse,

It’s good to know that you have figured out a way to be able to accomplish what you have in mind.
Thanks for letting us know.

Cheers.

#8

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