animating sliding door images to reveal text

<!---

(＼ ∧♛∧          .+° °*.
(ヾ( *･ω･)        °・  cr viliarreai if used !
`し(   つ つ━✩*  .+°
(／しーＪ

--->

<style>
/*my credits! please dont remove, but you may the change the img to ur liking*/
.dont-remove {
position:fixed;
z-index:99;
bottom:0;margin-bottom:5px;
left:0;margin-left:5px;
}

/* DON'T EDIT THIS*/
@* {
box-sizing: border-box;
}
body {
margin: 0;
}

/*how the container will look when the image opens*/
figure {
position: relative;
width: 20vw;
height: 20vw;
margin: 0 auto;
overflow: hidden;
background-color: #ffdbec;
background-size: cover;
}

/* DON'T EDIT THIS*/
figure img {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: 1s ease-in-out;
}

/* DON'T EDIT THIS*/
figure img:first-of-type {
clip-path: url(#tophalf);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

/* DON'T EDIT THIS*/
figure img:last-of-type {
clip-path: url(#bottomhalf);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

/*how much the top part will open*/
figure:hover img:first-of-type {
transform: translateY(-30%);
}

/*how much the bottom part will open (i recommend making it the same as the top one)*/
figure:hover img:last-of-type {
transform: translateY(30%);
}

/*how ur text will look like when the image opens*/
figcaption {
font-family: times;
text-shadow: -1.5px 0 #ffa8d2, 0 1.5px #ffa8d2, 1.5px 0 #ffbfde, 0 -1.5px #ffbfde, 0 0;
padding-top: 7vw; /*you might need to change the padding top to center the text*/
font-weight:bold;
top: 0;
font-size: 5vw;
width: 100%;
height: 100%;
position: absolute;
color: white;
text-align: center;
}

/* DON'T EDIT THIS*/
#svghalves {
width: 0;
height: 0;
}

/* DON'T EDIT THIS*/
@media all and (max-width: 500px) {
figure {
width: 50%;
height: 50vw;
}
figcaption {
font-size: 50%;
}
}

/*links from teaclub.crd.co*/
a.pink {
display:inline;
width: 250px;
box-shadow: inset 0 0 0 0 #ff89c2;
overflow: visible;
-webkit-transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}

a.pink:hover {
text-decoration: none;
box-shadow: inset 0 100px 0 0 #ff89c2;}

a.pink:active, a.pink:link, a.pink:visited {
color:#fff;
text-decoration: none;}

</style>
<a href="https://twitter.com/vilIarreaI" title="sliding door code created by ximena!"><img class="dont-remove" src="https://64.media.tumblr.com/tumblr_lkl5s8Ay6F1qfamg6.gif"></a>
<figure>
<!--- links here --->

<figcaption><a class="pink" href="#i">I.</a><a class="pink" href="#ii">II.</a><a class="pink" href="#iii">III.</a></figcaption>

<!--- IMPORTANT you have to put ur img link twice for this to work --->

<img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
<img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
</figure>

<!--- DON'T EDIT THIS --->
<svg id="svghalves">
<defs>
<clipPath id="tophalf" clipPathUnits="objectBoundingBox">
<polygon points="0 0,1 0,1 .5,0 .5" />
</clipPath>
<clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
0 50%, 100% 50%, 100% 100%, 0 100%
<polygon points="0 .5,1 .5,1 1,0 1" />
</clipPath>

</defs>
</svg>