Customizing Slider to scale up and fade at the same time

I am working on a clients Squarespace website, the site is not public so I didnt provide the URL. But they want to match the transitions of the slider of the website I've proved below, which is a wix website:

https://www.gatewayfbgtx.com/

I cannot find any css or JavaScript that will help me match the transitions that this wix website has. I currently have my slider to full bleed and a scale up transition, but I want the image to start at its original scale and zoom in even while in transition to the next image. I used this in combination with my current settings and it only broke the transition to do a direct fade instead of combining a fade in and scale up.

.gallery-fullscreen-slideshow-item-img{
	transition: opacity 1600ms ease-in-out !important;
	-webkit-transition: opacity 1600ms ease-in-out !important;
	-ms-transition: opacity 1600ms ease-in-out !important;
	-moz-transition: opacity 1600ms ease-in-out !important;
	-o-transition: opacity 1600ms ease-in-out !important;
}

//.gallery-fullscreen-slideshow[data-transition="fade"] 
.gallery-fullscreen-slideshow-item[data-active="true"] .gallery-fullscreen-slideshow-item-src{
	transition: opacity 1400ms ease-in-out !important;
	-webkit-transition: opacity 1400ms ease-in-out !important;
	-ms-transition: opacity 1400ms ease-in-out !important;
	-moz-transition: opacity 1400ms ease-in-out !important;
	-o-transition: opacity 1400ms ease-in-out !important;
}

Sorry, a bit late --

Part of the problem is that you're using "!important" to override the default styles, but you're also eliminating the other animation styles that you want to keep. You'll need to manage both transitions instead of just the opacity.