Advertisement
izuemis

cr angeidiarys #2 image hover

Oct 4th, 2022
202
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 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. border: 4px solid #596a91;
  10.  
  11. border-radius: 10px 10px 50px 10px;}
  12. .figcaption img
  13. { width: 10px; }
  14. figure.blurfilter img
  15. { display: block;
  16. width: 9.75em;
  17. height: auto;
  18. transition: all 0.4s 0.4s; }
  19.  
  20. /* TEXT BOX */
  21. figure.blurfilter figcaption
  22. { position: absolute;
  23. display: block;
  24. /* TEXT BOX COSMETICS */
  25. text-align: left;
  26. -webkit-box-sizing: border-box;
  27. -moz-box-sizing: border-box;
  28. box-sizing: border-box;
  29. text-align: center;
  30. background: white;
  31. padding: 10px;
  32. z-index: 100;
  33. width: 90%;
  34. height: 90%;
  35. overflow: auto;
  36. top: 5%;
  37. left: 5%;
  38. font-family: Arial;
  39. font-size: 16px;
  40. opacity: 0;
  41. border-radius: 10px 10px 50px 10px;
  42. /* TEXT BOX ANIMATION CODE */
  43. -moz-transition: all 0.4s;
  44. -webkit-transition: all 0.4s;
  45. transition: all .4s; }
  46. figure.blurfilter figcaption h3
  47. { border-bottom: 1px solid red;
  48. text-align: left;
  49. width: 90%;
  50. margin: 0;
  51. }
  52. figure.blurfilter figcaption p
  53. { text-align: left;
  54. margin-top: 10px;
  55. line-height: 1;
  56. }
  57. figure.blurfilter figcaption a
  58. { text-decoration: none;
  59. }
  60. figure.blurfilter:hover img
  61. { -webkit-filter: blur(5px);
  62. filter: blur(5px);
  63. -webkit-transform: scale(1.3);
  64. transform: scale(1.3);
  65. -moz-transition: all 0.4s;
  66. -webkit-transition: all 0.4s;
  67. transition: all 0.4s; } figure.blurfilter:hover figcaption{ opacity: 1;
  68. -moz-transition: all .4s .4s;
  69. -webkit-transition: all .4s .4s;
  70. transition: all .4s .4s; }
  71. figure.slideup figcaption
  72. { -webkit-transform: translateY(100%);
  73. transform: translateY(100%);
  74. }
  75. figure.slideup:hover figcaption
  76. { -webkit-transform: translateY(0);
  77. transform: translateY(0); }
  78. .pixel
  79. { width: 1em !important;
  80. filter: none !important;
  81. display: inline-block; }
  82. figcaption { overflow-y: scroll; }
  83.  
  84. .links {
  85. border-radius: 5px;
  86. }
  87.  
  88. mark2 {
  89. text-shadow: -1px 0 #3e2137, 0 1px #3e2137, 1px 0 #3e2137, 0 -1px #3e2137, 0 0;
  90. font-family:'genty';
  91. color: #adb8bb;
  92. font-size: 1.5em;
  93. }
  94.  
  95. </style>
  96.  
  97. <! –– IMAGE URL AND TEXT ––>
  98. <figure class="blurfilter slideup"><img class="links" src="https://cdn.discordapp.com/attachments/1011654476983177419/1026732241352675381/325e8d5a0c7542c9aec00b6961e0a752_1.jpg">
  99. <figcaption>
  100. <mark2><center>Socials</center></mark2>
  101. <br>
  102. <a href="http://twitter.com/finderqirl">twitter</a> <a href="http://twitter.com/virtualcrd">crd acc</a>
  103. </figcaption></figure>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement