I have a broken 'Shimmer'! - possible beta css problem

Beta
#1

Hi,

I have installed the beta 2 onto a staging version of a live site and when comparing site versions, it appears that some on hover animation is no longer happening

see video…

https://drive.google.com/a/zooming-feet.com/file/d/19egSeMwd55C15NhqhHWhsNTrcuwF2L72/view?usp=drivesdk

the css for the ‘shimmer’ is below and applied to each button

.hover_sheen {
position: relative;
overflow: hidden;
}

.hover_sheen:after {
content: “”;
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
opacity: 0;
transform: rotate(30deg);

background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.3) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}

.hover_sheen:hover:after {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 1.1s, 1.1s, .5s;
transition-timing-function: ease;
}

.hover_sheen:active:after {
opacity: 0;
}

#2

I see what you mean. So checked your site live and started by setting the background to a solid color rather than the gradient. On production it fully covered the button but on staging it was behind the image and text.

The previous update set z-index: 2 on the graphic, but in this update we’ve made an adjustment that the x-anchor-content div also gets z-index: 2. If you update your CSS to apply a higher z-index to the :after pseudo element it will be corrected.

.hover_sheen:after {
  z-index: 3;
}
#3

@alexander Broken Shimmer Fixed!

Thank you,

updated my staging server and it resolves the issue… also something to consider when adding future css to buttons

#4

Great! Thanks for letting us know. I’ll make a FAQ item about it on the release notes so there’s more awareness.

1 Like