dracslaura

animating sliding door images to reveal text

Jun 18th, 2021 (edited)
1,497
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!---
  2.  
  3. (\ ∧♛∧ .+° °*.
  4. (ヾ( *・ω・) °・ cr viliarreai if used !
  5. `し( つ つ━✩* .+°
  6. (/しーJ
  7.  
  8. --->
  9.  
  10. <style>
  11. /*my credits! please dont remove, but you may the change the img to ur liking*/
  12. .dont-remove {
  13. position:fixed;
  14. z-index:99;
  15. bottom:0;margin-bottom:5px;
  16. left:0;margin-left:5px;
  17. }
  18.  
  19. /* DON'T EDIT THIS*/
  20. @* {
  21. box-sizing: border-box;
  22. }
  23. body {
  24. margin: 0;
  25. }
  26.  
  27. /*how the container will look when the image opens*/
  28. figure {
  29. position: relative;
  30. width: 20vw;
  31. height: 20vw;
  32. margin: 0 auto;
  33. overflow: hidden;
  34. background-color: #ffdbec;
  35. background-size: cover;
  36. }
  37.  
  38. /* DON'T EDIT THIS*/
  39. figure img {
  40. position: absolute;
  41. top: 0;
  42. left: 0;
  43. width: 100%;
  44. transition: 1s ease-in-out;
  45. }
  46.  
  47. /* DON'T EDIT THIS*/
  48. figure img:first-of-type {
  49. clip-path: url(#tophalf);
  50. clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  51. }
  52.  
  53. /* DON'T EDIT THIS*/
  54. figure img:last-of-type {
  55. clip-path: url(#bottomhalf);
  56. clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  57. }
  58.  
  59. /*how much the top part will open*/
  60. figure:hover img:first-of-type {
  61. transform: translateY(-30%);
  62. }
  63.  
  64. /*how much the bottom part will open (i recommend making it the same as the top one)*/
  65. figure:hover img:last-of-type {
  66. transform: translateY(30%);
  67. }
  68.  
  69. /*how ur text will look like when the image opens*/
  70. figcaption {
  71. font-family: times;
  72. text-shadow: -1.5px 0 #ffa8d2, 0 1.5px #ffa8d2, 1.5px 0 #ffbfde, 0 -1.5px #ffbfde, 0 0;
  73. padding-top: 7vw; /*you might need to change the padding top to center the text*/
  74. font-weight:bold;
  75. top: 0;
  76. font-size: 5vw;
  77. width: 100%;
  78. height: 100%;
  79. position: absolute;
  80. color: white;
  81. text-align: center;
  82. }
  83.  
  84. /* DON'T EDIT THIS*/
  85. #svghalves {
  86. width: 0;
  87. height: 0;
  88. }
  89.  
  90. /* DON'T EDIT THIS*/
  91. @media all and (max-width: 500px) {
  92. figure {
  93. width: 50%;
  94. height: 50vw;
  95. }
  96. figcaption {
  97. font-size: 50%;
  98. }
  99. }
  100.  
  101. /*links from teaclub.crd.co*/
  102. a.pink {
  103. display:inline;
  104. width: 250px;
  105. box-shadow: inset 0 0 0 0 #ff89c2;
  106. overflow: visible;
  107. -webkit-transition: all ease 0.5s;
  108. -moz-transition: all ease 0.5s;
  109. transition: all ease 0.5s;
  110. }
  111.  
  112. a.pink:hover {
  113. text-decoration: none;
  114. box-shadow: inset 0 100px 0 0 #ff89c2;}
  115.  
  116. a.pink:active, a.pink:link, a.pink:visited {
  117. color:#fff;
  118. text-decoration: none;}
  119.  
  120. </style>
  121. <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>
  122. <figure>
  123. <!--- links here --->
  124.  
  125. <figcaption><a class="pink" href="#i">I.</a><a class="pink" href="#ii">II.</a><a class="pink" href="#iii">III.</a></figcaption>
  126.  
  127. <!--- IMPORTANT you have to put ur img link twice for this to work --->
  128.  
  129. <img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
  130. <img src="https://data.whicdn.com/images/341701404/original.jpg" alt="">
  131. </figure>
  132.  
  133. <!--- DON'T EDIT THIS --->
  134. <svg id="svghalves">
  135. <defs>
  136. <clipPath id="tophalf" clipPathUnits="objectBoundingBox">
  137. <polygon points="0 0,1 0,1 .5,0 .5" />
  138. </clipPath>
  139. <clipPath id="bottomhalf" clipPathUnits="objectBoundingBox">
  140. 0 50%, 100% 50%, 100% 100%, 0 100%
  141. <polygon points="0 .5,1 .5,1 1,0 1" />
  142. </clipPath>
  143.  
  144. </defs>
  145. </svg>
RAW Paste Data