Replacing aspect-ratio: 1; with, padding-top: 56.25%;

[csshtmljscoding]

How do I do that here? [jsfiddle.net ]

All I am doing is replacing aspect-ratio: 1; with, padding-top: 56.25%; in the code.

.inner {
height: 100%;
width: 200%;
position: absolute;
left: 0;
top: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}

.panel-right .inner {
left: -100%;
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
aspect-ratio: 1;
margin: auto;
height: 100%;
}

.inner:before {
content: "";
background: url(https://i.imgur.com/z5MMJnv.png);
}

.inner:after {
content: "";
background: url(https://i.imgur.com/8Jf8LLc.png);
}

.inner span {
background: url(https://i.imgur.com/5u16syR.png);
position: relative;
}

.inner span:before,
.inner span:after {
content: "";
display: block;
position: absolute;
inset: 0 0 0 0;
}

.inner span:before {
background: url(https://i.imgur.com/ygTtvme.png);
transform: translateX(-99.99%);
}

.inner span:after {
background: url(https://i.imgur.com/QziKNDW.png);
transform: translateX(99.99%);
}

.inner span,
.inner span:before,
.inner span:after,
.inner:before,
.inner:after {
background-size: cover;
}

[lucy24]

It helps if you start by explaining in English what you want to achieve. Code dumps aren’t especially useful, especially when they contain a whole lot of information that isn’t directly pertinent to the question.

[tangor]

@csshtmljscoding ... Welcome to Webmasterworld!

Seeing the error (unknown) without knowing the effect desired is quite difficult.

[desterhase]

The thing I'd want to do is have the transitions begin on clicks instead of hover. I don't know if that was the problem you were having, but the only thing that seemed wrong about the original is that the transition depends on someone moving their mouse into the window and then not moving it until the transition completes.

[jsfiddle.net...]

[not2easy]

Hi desterhase and welcome to WebmasterWorld [webmasterworld.com]

Unfortunately, we still don't know the exact problem that csshtmljscoding experienced because they posted and then went away. No one can guess from the code what was happening or what they wanted to have happen.

The reason there was not more participation regarding the original question that opened this thread was because they posted their code on jsfiddle. By doing that it doesn't help anyone but the person who posted to jsfiddle. That is not in keeping with the Charter [webmasterworld.com] of this forum that politely asks people to share only the relevant code (CSS and html) so that the work and the results will be available here for others like yourself who stop in.

NO links to "test pages", "examples", or "screenshots".

It is not uncommon, over the past few years people find it easier to put their work in wherever it is handy but it does not help others who might help if we were all talking about the same thing.

For your benefit, that welcome link above offers tips on using the forums' features and settings. We're here to help each other do better.