Optimize hover overlay animation - html

Question

I created a specific hover effect only with HTML and CSS.
.cont {
background: blue;
position: relative;
width: 400px;
height: 200px;
margin: 50px;
}
.pre {
background: green;
position: absolute;
height: 0;
width: 100%;
bottom: 0;
clip-path: polygon(100% 100%, 100% 0, 0 100%);
transition: height 0.5s 0.5s;
}
.pre ~ .pre {
background: red;
bottom: auto;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cont:hover .pre {
height: 100%;
transition: height 0.5s;
}
.post {
position: absolute;
height: 100%;
width: 100%;
transition: opacity 0s 0.5s, clip-path 0.5s;
background: green;
opacity: 0;
}
.post ~ .post {
background: red;
position: absolute;
height: 100%;
width: 100%;
clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
}
.cont:hover .post {
opacity: 1;
transition: opacity 0s 0.5s, clip-path 0.5s 0.5s;
}
.post ~ .post:hover {
clip-path: polygon(0 0, 100% 0, 90% 80%, 0 100%);
}
.post:hover ~ .post {
clip-path: polygon(0 0, 100% 0, 10% 20%, 0 100%);
}
<div class="cont">
<div class="pre">
<div style="position:absolute;bottom:80px;right:80px;">
some complex html content
</div>
</div>
<div class="pre">
<div style="position:absolute;top:80px;left:80px;">
different complex html content
</div>
</div>
<div class="post">
<div style="position:absolute;bottom:80px;right:80px;">
some complex html content
</div>
</div>
<div class="post">
<div style="position:absolute;top:80px;left:80px;">
different complex html content
</div>
</div>
</div>
The snippet shows the fully working hover effect, but the implementation is pretty awkward.
It uses two divs (class="pre") for creating the "overlay" effect and two separate divs (class="post"), which are only set to opacity: 1 after the "overlay" effect has completed, for creating the "toggle" effect. Also the "toggle" effect is delayed, thus feels kind of sluggish.
I am looking for an implementation (only HTML+CSS) that only uses two divs (+container div) to create the same effects and/or an implementation that removes the "toggle"-delay.
I've already tried using animation to do the "overlay" effect but to no avail.
Any ideas on how a two-div (no pseudo elements) implementation of this effect could be accomplished?