Button Image Fade / Crossfade

[The_Seamless_Brand]

When creating a button and using the Graphic Image function, the images will switch from the Primary Graphic Image to the Secondary Graphic Image on interaction – though these elements fade in a way that leaves a transparent gap in the crossfade; Primary Graphic Image fades out, while Secondary Graphic Image fades in - somewhere in-between there is a opacity dip. I would like to force the Primary Graphic Image to have a longer fade transition to avoid this, or for it to remain with full opacity during the interaction.

Suggestions?

[ruenel]

Hello Kris,

Thanks for writing in!

You may use this custom css to adjust the transition delay of the images:

.x-graphic-image.x-image.x-graphic-primary {
    opacity: 1;
    transition: opacity 2s ease;
}

.x-graphic-image.x-image.x-graphic-secondary {
  opacity: 0;
  transition: opacity 1s ease;
}

.x-graphic-image.x-image.x-graphic-primary.x-active {
    opacity: 0;
}

.x-graphic-image.x-image.x-graphic-secondary.x-active {
  opacity: 1;
}

Just to manage your expectations, this isn’t specifically a theme issue, but rather, your customisation of it. So whilst I have happily provided you with some guidance above on how to get it working, we cannot provide theme customisation as a general rule, or support custom code solutions provided. Therefore, you might find it helpful to check out the following:

CSS Selector Reference
How to find the css selector in chrome

Regards.

[The_Seamless_Brand]

Thank you very much RueNel

[ruenel]

You are most welcome!