Hi there,
I have a Video Element and in Content > Overlay/Icon I have added a custom “Play button” SVG. Then in Style > CSS I have added some code to add an animation to the SVG making it scale up and down from the center.
The animation works but now the SVG is not positioned in the center of the Video Element anymore. Can anyone help me with this?
Thanks!
root .bricks-video-overlay-icon {
position: absolute;
top: 50%;
left: 50%;
width: 20rem;
height: 20rem;
animation-name: anim-idle;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.2,1.25,0.5,1)
}
root:hover .bricks-video-overlay-icon {
position: absolute;
top: 50%;
left: 50%;
width: 20rem;
height: 20rem;
animation-name: anim-hover;
animation-duration: 0.45s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.2,1.25,0.5,1)
}
@keyframes anim-idle {
0% { transform: scale(0.85,0.8); }
100% { transform: scale(1,1); }
}
@keyframes anim-hover {
0% { transform: scale(0.65,0.6); }
100% { transform: scale(1,1); }
}