jakeandamir

blur x expand menu

Aug 19th, 2021 (edited)
261
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2. figure.blurfilter{
  3. margin: 0;
  4. padding: 0;
  5. display: inline-block;
  6. position: relative;
  7. overflow: hidden; /
  8. }
  9.  
  10. .figcaption img {
  11. width: 10px;
  12. }
  13.  
  14. figure.blurfilter img{
  15. display: inline-block;
  16. width: 250px;
  17. height: auto;
  18. transition: all 0.4s 0.4s;
  19. }
  20.  
  21. figure.blurfilter figcaption{
  22. position: absolute;
  23. display: block;
  24. text-align: left;
  25. -webkit-box-sizing: border-box;
  26. -moz-box-sizing: border-box;
  27. box-sizing: border-box;
  28. text-align: center;
  29. background: white;
  30. padding: 10px;
  31. z-index: 100;
  32. width: 90%;
  33. height: 90%;
  34. overflow: auto;
  35. top: 5%;
  36. left: 5%;
  37. font-family: Arial;
  38. font-size: 16px;
  39. opacity: 0;
  40. -moz-transition: all 0.4s;
  41. -webkit-transition: all 0.4s;
  42. transition: all .4s;
  43. }
  44.  
  45.  
  46. figure.blurfilter figcaption h3{
  47. border-bottom: 1px solid red;
  48. text-align: left;
  49. width: 90%;
  50. margin: 0;
  51. }
  52.  
  53. figure.blurfilter figcaption p{
  54. text-align: left;
  55. margin-top: 10px;
  56. line-height: 1.5;
  57. }
  58.  
  59. figure.blurfilter figcaption a{
  60. text-decoration: none;
  61. }
  62.  
  63. figure.blurfilter:hover img{
  64. -webkit-filter: blur(5px);
  65. filter: blur(5px);
  66. -webkit-transform: scale(1.3);
  67. transform: scale(1.3);
  68. -moz-transition: all 0.4s;
  69. -webkit-transition: all 0.4s;
  70. transition: all 0.4s;
  71. }
  72.  
  73. figure.blurfilter:hover figcaption{
  74. opacity: 1;
  75. -moz-transition: all .4s .4s;
  76. -webkit-transition: all .4s .4s;
  77. transition: all .4s .4s;
  78. }
  79.  
  80.  
  81. figure.expandx figcaption{
  82. -webkit-transform: rotateX(90deg);
  83. transform: rotateX(90deg);
  84. }
  85.  
  86. figure.expandx:hover figcaption{
  87. -webkit-transform: rotateX(0);
  88. transform: rotateX(0);
  89. }
  90. .pixel {
  91. width: 1em !important;
  92. filter: none !important;
  93. display: inline-block;
  94. }
  95. figcaption {
  96. overflow-y: scroll;
  97. }
  98. </style>
  99. <figure class="blurfilter blurrotate">
  100. <img src="https://64.media.tumblr.com/tumblr_kzsis9VF6Q1qasthro1_640.jpg" >
  101. <figcaption>
  102. Insert the contents of the box here. Adding images here is a little bit tricky because you have to create a special class to size the image and make sure it doesn't blur with the background image on hover. See ".pixel" above and how the image next is tagged "class='pixel'". In order to give an image a class, just add class="classname" add the end of the tag before the brackets cut off. THe class name here is "pixel". Here's a pixel. <img src="https://gnome.crd.co/assets/images/people/25a5305f.gif?v=bc6557bf" class="pixel">
  103. </figcaption>
  104. </figure>
RAW Paste Data