jakeandamir

blur rotate menu

Aug 19th, 2021 (edited)
289
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <style>
  2.  
  3. figure.blurfilter{
  4. margin: 0;
  5. padding: 0;
  6. display: inline-block;
  7. position: relative;
  8. overflow: hidden; /
  9. }
  10.  
  11. .figcaption img {
  12. width: 10px;
  13. }
  14.  
  15. figure.blurfilter img{
  16. display: inline-block;
  17. width: 250px;
  18. height: auto;
  19. transition: all 0.4s 0.4s;
  20. }
  21.  
  22. figure.blurfilter figcaption{
  23. position: absolute;
  24. display: block;
  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. -moz-transition: all 0.4s;
  42. -webkit-transition: all 0.4s;
  43. transition: all .4s;
  44. }
  45.  
  46.  
  47. figure.blurfilter figcaption h3{
  48. border-bottom: 1px solid red;
  49. text-align: left;
  50. width: 90%;
  51. margin: 0;
  52. }
  53.  
  54. figure.blurfilter figcaption p{
  55. text-align: left;
  56. margin-top: 10px;
  57. line-height: 1.5;
  58. }
  59.  
  60. figure.blurfilter figcaption a{
  61. text-decoration: none;
  62. }
  63.  
  64. figure.blurfilter:hover img{
  65. -webkit-filter: blur(5px);
  66. filter: blur(5px);
  67. -webkit-transform: scale(1.3);
  68. transform: scale(1.3);
  69. -moz-transition: all 0.4s;
  70. -webkit-transition: all 0.4s;
  71. transition: all 0.4s;
  72. }
  73.  
  74. figure.blurfilter:hover figcaption{
  75. opacity: 1;
  76. -moz-transition: all .4s .4s;
  77. -webkit-transition: all .4s .4s;
  78. transition: all .4s .4s;
  79. }
  80.  
  81.  
  82. figure.blurrotate figcaption{
  83. -webkit-transform: rotate(10deg);
  84. transform: rotate(10deg);
  85. }
  86.  
  87. figure.blurrotate:hover figcaption{
  88. -webkit-transform: rotate(0);
  89. transform: rotate(0);
  90. }
  91.  
  92. .pixel {
  93. width: 1em !important;
  94. filter: none !important;
  95. display: inline-block;
  96. }
  97. figcaption {
  98. overflow-y: scroll;
  99. }
  100. </style>
  101. <figure class="blurfilter blurrotate">
  102. <img src="https://64.media.tumblr.com/tumblr_kzsis9VF6Q1qasthro1_640.jpg" >
  103. <figcaption>
  104. 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">
  105. </figcaption>
  106. </figure>
RAW Paste Data