Rotating poster image glitches on mobile

Hello out there!

I've got rotating images that perform perfectly on desktop but glitch out on mobile before rotating. I really hope to figure out what's wrong so I can use rotating images now and in the future, but this glitch is a non-starter.

URL is https://www.j2tampa.com/loan-options. Code pasted below. Help help!
 

.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateX(180deg); transition: 1s} .image-card-wrapper{transform:rotateX(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateX(0deg)!important; background: #006787; transition: 1s;}

Hmmm... I notice the glitch does not happen on Android mobile, only on my iPhone 14. This Wordpress site, which I did not make, uses the same concept—but these rotating images don't glitch on my iPhone. What are they doing that I'm not doing?

Which glitch? 

You can also try this code first, I added some prefix for Safari

.design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.design-layout-poster:hover img{-webkit-transform: rotateX(180deg);transform: rotateX(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .image-card-wrapper{-webkit-transform:rotateX(180deg)!important;transform:rotateX(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; -webkit-transform:rotateX(0deg)!important; transform:rotateX(0deg)!important; background: #006787; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}