Advertisement
Guest User

Untitled

a guest
May 25th, 2022
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.49 KB | None | 0 0
  1. <div id="rabbits"><div class="perfume"> ABOUT </div><div onclick="" class="lotion"><p> i scroll text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></div></div>
  2. <style>
  3. #rabbits {
  4. display: inline-block;
  5. text-align: center;
  6. width: 300px;
  7. height: 100px;
  8. overflow-x: hidden;
  9. overflow-y: hidden; border:
  10. dashed 2px #000; background: #f8f8f8;
  11. transition: all 1s ease-out;
  12. -o-transition-transition: all 1s ease-out;
  13. -webkit-transition: all 1s ease-out;
  14. -moz-transition: all 1s ease-out;
  15. }
  16. .perfume {
  17. font-family: "shrikhand";
  18. font-size: 25px;
  19. color: #254B66;
  20. opacity: 1;
  21. transition: all 0.5s ease-out;
  22. -o-transition-transition: all 0.5s ease-out;
  23. -webkit-transition: all 0.5s ease-out;
  24. -moz-transition: all 0.5s ease-out;
  25. }
  26. #rabbits:hover .perfume {
  27. margin-top: -40px;
  28. opacity: 0;
  29. filter: blur(1px);
  30. }
  31. .lotion {
  32. overflow-x: scroll;
  33. font-size: .85em;
  34. margin-top: 15px;
  35. font-family: mali;
  36. color: #000;
  37. opacity: 0;
  38. transition: all 0.5s ease-out;
  39. -o-transition-transition: all 0.5s ease-out;
  40. -webkit-transition: all 0.5s ease-out;
  41. -moz-transition: all 0.5s ease-out;
  42. padding: 2.5px;
  43. overflow-x: hidden;
  44. height: 50px;
  45. } #rabbits:hover .lotion {
  46. opacity: 1;
  47. overflow-x: hidden;
  48. height: 97.5px;
  49. }
  50. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement