Advertisement
fterlyfe

slide up blur background text box

Dec 8th, 2021
588
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.95 KB | None | 0 0
  1. <style>
  2. /* CONTAINER SETTINGS */
  3. figure.blurfilter
  4. { margin: 0;
  5. padding: 0;
  6. display: inline-block;
  7. position: relative;
  8. overflow: hidden; / }
  9. .figcaption img
  10. { width: 10px; }
  11. figure.blurfilter img
  12. { display: block;
  13. width: 250px;
  14. height: auto;
  15. transition: all 0.4s 0.4s; }
  16.  
  17. /* TEXT BOX */
  18. figure.blurfilter figcaption
  19. { position: absolute;
  20. display: block;
  21. /* TEXT BOX COSMETICS */
  22. text-align: left;
  23. -webkit-box-sizing: border-box;
  24. -moz-box-sizing: border-box;
  25. box-sizing: border-box;
  26. text-align: center;
  27. background: white;
  28. padding: 10px;
  29. z-index: 100;
  30. width: 90%;
  31. height: 90%;
  32. overflow: auto;
  33. top: 5%;
  34. left: 5%;
  35. font-family: Arial;
  36. font-size: 16px;
  37. opacity: 0;
  38. /* TEXT BOX ANIMATION CODE */
  39. -moz-transition: all 0.4s;
  40. -webkit-transition: all 0.4s;
  41. transition: all .4s; }
  42. figure.blurfilter figcaption h3
  43. { border-bottom: 1px solid red;
  44. text-align: left;
  45. width: 90%;
  46. margin: 0;
  47. }
  48. figure.blurfilter figcaption p
  49. { text-align: left;
  50. margin-top: 10px;
  51. line-height: 1.5;
  52. }
  53. figure.blurfilter figcaption a
  54. { text-decoration: none;
  55. }
  56. figure.blurfilter:hover img
  57. { -webkit-filter: blur(5px);
  58. filter: blur(5px);
  59. -webkit-transform: scale(1.3);
  60. transform: scale(1.3);
  61. -moz-transition: all 0.4s;
  62. -webkit-transition: all 0.4s;
  63. transition: all 0.4s; } figure.blurfilter:hover figcaption{ opacity: 1;
  64. -moz-transition: all .4s .4s;
  65. -webkit-transition: all .4s .4s;
  66. transition: all .4s .4s; }
  67. figure.slideup figcaption
  68. { -webkit-transform: translateY(100%);
  69. transform: translateY(100%);
  70. }
  71. figure.slideup:hover figcaption
  72. { -webkit-transform: translateY(0);
  73. transform: translateY(0); }
  74. .pixel
  75. { width: 1em !important;
  76. filter: none !important;
  77. display: inline-block; }
  78. figcaption { overflow-y: scroll; }
  79. </style>
  80.  
  81. <! –– IMAGE URL AND TEXT ––>
  82. <figure class="blurfilter slideup"><img src="https://media.discordapp.net/attachments/865407018692509720/886626765919891456/1631458319945.gif"><figcaption>TEXT HERE</figcaption></figure>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement