Advertisement
kyujouz

scrollbox appear on hover (img)

Mar 17th, 2022
1,959
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.52 KB | None | 0 0
  1. <style>
  2. #cont {
  3. /*container! i'd recommed u only change the border eheh */
  4. width: 250px;
  5. height: 250px;
  6. position: relative;
  7. margin-left: auto;
  8. margin-right: auto;
  9. background-image: url('https://pochi.crd.co/assets/images/image11.jpg?v=6995337e');
  10. background-size: 100% 100%;
  11. background-repeat: no-repeat;
  12. box-shadow: inset -15px -15px 15px white, inset 15px 15px 15px white, 15px 15px 15px white, -15px 15px 15px white, 15px -15px 15px white, -15px -15px 15px white;
  13. margin: auto;
  14. }
  15.  
  16. #float {
  17. /* floating text, u can change this! */
  18. position: absolute;
  19. width: 100%;
  20. left: 0;
  21. top: -10px;
  22. text-align: center;
  23. font-family: 'Berkshire Swash', cursive;
  24. font-size: 3.5em;
  25. background: linear-gradient(to top, #fff 2%, #F4C7D4 100%);
  26. z-index: 1;
  27. -webkit-filter: drop-shadow(0px 0px 3px #FFB0C9);
  28. opacity: 0.9;
  29. -webkit-text-stroke-width: 0.5px;
  30. -webkit-text-stroke-color: #E38DAC;
  31. -webkit-background-clip: text;
  32. -webkit-text-fill-color: transparent;
  33. animation-name: floating;
  34. animation-duration: 3s;
  35. animation-iteration-count: infinite;
  36. animation-timing-function: ease-in-out;
  37. }
  38.  
  39. @keyframes floating {
  40. 0% {
  41. transform: translate(0, 0px);
  42. }
  43.  
  44. 50% {
  45. transform: translate(0, 15px);
  46. }
  47.  
  48. 100% {
  49. transform: translate(0, -0px);
  50. }
  51. }
  52.  
  53. #scroll {
  54. /* scrollbox! u can change this! note: mess around with the 'margin-left' depending on the width or if u change anything of the scrollbox bc it messes a bit */
  55. opacity: 0;
  56. position: absolute;
  57. margin-left: 4%;
  58. margin-right: 4%;
  59. width: 210px;
  60. top: 80px;
  61. border-radius: 10px;
  62. padding: 10px;
  63. height: 130px;
  64. overflow: scroll;
  65. background: #FFFFFF90;
  66. transition: opacity .35s ease;
  67. /* style of the text inside scrollbox */
  68. font-size: 16px;
  69. font-family: 'Quicksand', sans-serif;
  70. color: #000;
  71. text-align: center;
  72. }
  73.  
  74. mark {
  75. background: #F4C7D499;
  76. border: 1px solid #454545;
  77. border-radius: 7px;
  78. padding-left: 5px;
  79. padding-right: 5px;
  80. }
  81.  
  82. #cont:hover #scroll {
  83. opacity: 1;
  84. }
  85.  
  86. #overlay {
  87. /* overlay! (blue in this case) (hidden without mouseover) */
  88. position: absolute;
  89. bottom: 0;
  90. left: 0;
  91. right: 0;
  92. background: rgba(199, 234, 252, 0);
  93. /*copy the color of ur choice in rgb! the last digit stands for opacity*/
  94. overflow: hidden;
  95. width: 0;
  96. height: 100%;
  97. transition: background 0.5s ease;
  98. border-radius: 9px;
  99. }
  100.  
  101. #cont:hover #overlay {
  102. /* overlay when hovered! (it appears) */
  103. width: 100%;
  104. background: rgba(199, 234, 252, .2);
  105. /*copy the color of ur choice in rgb! the last digit stands for opacity*/
  106. transition: background 0.5s ease-out;
  107. }
  108.  
  109. ::selection {
  110. color: white;
  111. background: #E75087;
  112. }
  113. </style>
  114. </div>
  115. <div id="embed03">
  116. <div id="cont">
  117. <div id="float">name</div>
  118. <div id="overlay"></div>
  119. <div id="scroll">
  120. your text here
  121. <p>
  122. </div>
  123. </div>
  124. </div>
  125. </div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement