API tools faq
paste
ruesha

hover image text embed

ruesha
Aug 14th, 2021
5,339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@800&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Mali:wght@400;600;700&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&display=swap" rel="stylesheet"><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link href="//fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet"><script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script><script src="https://dl.dropbox.com/s/vyffmps0ly6ikf4/glenplayer06.js"></script>
  5. </body>
  6. <style>
  7. @font-face { font-family: cutie; src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf); }
  8. @font-face { font-family: billo; src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF); }
  9. @font-face { font-family: day; src: url(https://dl.dropbox.com/s/yob9nensv1rr0zq/HelloDay.otf); }
  10. @font-face { font-family: janda; src: url(https://dl.dropbox.com/s/yrdkxo1lp0quocw/JandaHappyDay.ttf); }
  11. @font-face { font-family: kitten; src: url(https://dl.dropbox.com/s/gluaq7dfui5acoa/KittenSlantTrial.ttf); }
  12.  
  13. #news { font-family: billo; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; position: absolute; color: white; font-weight: bold; font-size: 2.2em; z-index: 2; bottom: 80px; left: 20px; }
  14.  
  15. #abt { font-family: cutie; position: absolute; bottom: 70px; left: 20px; color: white; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; font-size: 1.2em; }
  16.  
  17. #cont { background: white; box-shadow: 0 0 8px 8px white inset; position: relative; left: -15px; margin-left: auto; margin-right: auto; width: 50%; border-radius: 7px; height: 200px; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; padding: 10px; display: flex; }
  18.  
  19. .inside { border-radius: 7px; margin-left: auto; margin-right: auto; width: 200px; height: 100%; object-fit: cover; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; }
  20.  
  21. #cont:hover { width: 100%; position: relative; left: 5px; } #cont:hover .inside { width: 40%; height: 100%; object-fit: cover; }
  22.  
  23. #cont2 { height: 200px; width: 100%; margin-left: 10px; padding: 0; }
  24.  
  25. #scroll1 { text-align: left; border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; padding: 7px; height: 82px; width: 100%; opacity: 0; overflow: scroll; font-family: 'Mali', cursive; font-size: 0.8em; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; line-height: 1.3em; }
  26.  
  27. #scroll2 { line-height: 1.3em; transition: 0.8s; -moz-transition: 0.8s; -webkit-transition: 0.8s; -o-transition: 0.8s; text-align: left; border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round; margin-top: 10px; padding: 7px; height: 82px; width: 100%; opacity: 0; overflow: scroll; font-family: 'Mali', cursive; font-size: 0.8em; }
  28. #cont:hover
  29. #scroll1 { opacity: 1; }
  30. #cont:hover #scroll2 { opacity: 1; }
  31. mark { background: #fce6f0; border-radius:7px; border: 1px solid black; padding-left: 5px; padding-right: 5px; }
  32.  
  33. :root { --Music-Player-Vinyl:#fff; --Vinyl-Icon-Size:17px; --Vinyl-Spin-Speed:3.5s; --Music-Controls:#fff; --Music-Controls-Size:12px; --Music-Title-Font-Size:11px; --Music-Title-Color:#000; } .glenjams-06 { display:none; position: absolute; bottom: 20px; left: 20px; z-index:99; } .pasta { display:flex; align-items:center; } .vinyl-spin { animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -webkit-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -moz-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; -o-animation:recordspin var(--Vinyl-Spin-Speed) linear infinite; } .vinyl-pause { animation-play-state:paused; -webkit-animation-play-state:paused; -moz-animation-play-state:paused; -o-animation-play-state:paused; } @-webkit-keyframes recordspin { from { -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes recordspin { from { -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } to { -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); } } .vinyl, .vinyl svg { width:var(--Vinyl-Icon-Size); height:var(--Vinyl-Icon-Size); } .music-controls { margin-left:10px; width:var(--Music-Controls-Size); overflow:hidden; cursor:pointer; } .music-controls svg { width:var(--Music-Controls-Size); height:var(--Music-Controls-Size); color:var(--Music-Controls); stroke-width:1.5px; } .pausee {display:none;} .beff {display:none;} .aff {display:block;} .music-title { margin-left:8px; font-family:work sans; font-size:var(--Music-Title-Font-Size); color:var(--Music-Title-Color); } </style><div id="cont"><div id="news"></div><div id="abt">info info info</div><div class="glenjams-06"><div class="pasta"><div class="vinyl"></div><div class="music-controls"><div class="playy"><i data-feather="play"></i></div><div class="pausee"><i data-feather="pause"></i></div></div><div class="music-title"></div><audio id="audio" src="https://dl.dropbox.com/s/kr3red0e4vwwfsv/iz%20one%20welcome.mp3?dl=0" type="audio"></audio></div></div>
  34.  
  35. <img class=inside src="image or gif link here"><div id="cont2"><div id="scroll1"><span style="font-family: cutie; font-size:1.2em;">
  36.  
  37. <mark>label</mark></span> info info info info
  38.  
  39. <br></br>
  40. <span style="font-family: cutie; font-size:1.2em;"><mark>label</mark></span> info info info info
  41.  
  42. <br></br>
  43.  
  44. <span style="font-family: cutie; font-size:1.2em;"><mark>label</mark></span> info info info info
  45.  
  46. </div><div id="scroll2"> <span style="font-family: cutie; font-size:1.2em;"><mark>likes</mark></span> info info info
  47. <br></br>
  48.  
  49. </div><script>feather.replace()</script></div></div></div></div>
  50. </div><script>feather.replace()</script></div></div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!