How to re-position animated SVG Video Overlay Icon to center

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!

Untitled-2

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); }
}

Can no one help with this please? Can’t figure out what’s causing this… :frowning:

Hey @nallen,

you are overriding the initial transform value which breaks the centering. Please try the following CSS:

root .bricks-video-overlay-icon {
	inset: 0;
	margin: auto;
	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 {
	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); }
}

Let me know if that helped.

Best,

André

Thanks @aslotta that did the trick! Much appreciated!