[subscriptions@axcelara.com]

Hi Support Team,

We would like to make a change to the hover behavior of the left and right navigation arrows in the (Building a legacy, one project at a time) slider section.

Currently, when hovering over the arrows, a transform animation is applied, causing the arrow icons to move/change direction vertically. We would like to remove this transform animation while keeping the existing hover color change.

Could you please guide us on how to disable only the transform animation without affecting the current hover color effect?

Please refer the link for reference.

Thank you.

[Mehmet S.]

Hi,

Thank you for the detailed explanation and reference link.

I’ll review the slider navigation arrow styles and get back to you later today with the exact solution to disable only the transform animation while preserving the existing hover color effect.

Best regards,
Pixelwars Support

[Mehmet S.]

Hi,

Thanks for reaching out. The vertical “jump” you see is caused by a scale/translate transform that the Prime Slider Coral skin applies to the arrow icon on hover. It is independent from the hover color effect, so it can be disabled on its own.

Please go to Appearance → Customize → Additional CSS and add:

/*
Disable hover transform on the project slider arrows (keeps hover colors)
*/
.elementor-element-0172485 .bdt-prime-slider-previous:hover svg,
.elementor-element-0172485 .bdt-prime-slider-next:hover svg {
    transform: none !important;
}

If you would rather apply it to every slider that uses this skin instead of only this one section, use this version instead:

.bdt-prime-slider-skin-coral .bdt-prime-slider-previous:hover svg,
.bdt-prime-slider-skin-coral .bdt-prime-slider-next:hover svg {
    transform: none !important;
}

After saving, please clear any caching plugin / CDN cache and hard-refresh the page. The background and icon color change on hover will continue to work exactly as before; only the movement is removed.

Best regards,
Pixelwars Support