API tools faq
paste
OneAlbatross

Character Hub - Hover effect, buttons - Tailwind

OneAlbatross
Nov 12th, 2022 (edited)
193
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.33 KB | None | 0 0
raw download clone embed print report
  1. <!-- WARNING: all these helpful notes in dark blue will disapear after the first time you hit "save changes" -->
  2.  
  3. <div class="flex justify-center md:m-5 m-0 mt-3 md:p-2 p-0 flex-wrap rounded-md text-gray-200 " style="background-image: linear-gradient(rgba(30, 10, 30, 0), rgba(10, 10, 10, 0))">
  4.  
  5. <!-- you can change the pixel width and height of these boxs if you want, square images recomended to keep everything fitting corectly and not squished looking; these rows WRAP automatically so if you make the images wider it might shove the last image on the row to the next row below; -->
  6.  
  7. <!-- because these rows automatically WRAP it means you can also ADD MORE CHARACTERS and the rows will form automatically and any partially filled row is centered -->
  8.  
  9. <!--CHARACTER 1 -->
  10. <div class="p-1 md:p-3" style="height:160px; width:160px;">
  11. <div class="rounded-md h-full " style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  12. <a href="LINK_TO_CHARACTER" rel="nofollow">
  13. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div> <!--You can change the background color (bg-gray-900), how transparent it is (bg-opacity-60), the text color (text-white), and the text size (text-xl) -->
  14. <!-- check my blog for quick tips on changing these https://buzzly.art/~OneAlbatross/blog/template-editing-instructions-and-code-help-->
  15. </a>
  16. </div>
  17. </div>
  18. <!-- END of CHARACTER 1 -->
  19.  
  20. <!--CHARACTER 2 -->
  21. <div class="p-1 md:p-3" style="height:160px; width:160px;">
  22. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  23. <a href="LINK_TO_CHARACTER" rel="nofollow">
  24. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  25. </a>
  26. </div>
  27. </div>
  28. <!-- END of CHARACTER 2 -->
  29.  
  30. <!--CHARACTER 3 -->
  31. <div class="p-1 md:p-3 " style="height:160px; width:160px;">
  32. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  33. <a href="LINK_TO_CHARACTER" rel="nofollow">
  34. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  35. </a>
  36. </div>
  37. </div>
  38. <!-- END of CHARACTER 3 -->
  39.  
  40. <!--CHARACTER 4 -->
  41. <div class="p-1 md:p-3 " style="height:160px; width:160px;">
  42. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  43. <a href="LINK_TO_CHARACTER" rel="nofollow">
  44. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  45. </a>
  46. </div>
  47. </div>
  48. <!-- END of CHARACTER 4 -->
  49.  
  50. <!--CHARACTER 5 -->
  51. <div class="p-1 md:p-3" style="height:160px; width:160px;">
  52. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  53. <a href="LINK_TO_CHARACTER" rel="nofollow">
  54. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  55. </a>
  56. </div>
  57. </div>
  58. <!-- END of CHARACTER 5 -->
  59.  
  60. <!--CHARACTER 6 -->
  61. <div class="p-1 md:p-3 " style="height:160px; width:160px;">
  62. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  63. <a href="LINK_TO_CHARACTER" rel="nofollow">
  64. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  65. </a>
  66. </div>
  67. </div>
  68. <!-- END of CHARACTER 6 -->
  69.  
  70. <!--CHARACTER 7 -->
  71. <div class="p-1 md:p-3" style="height:160px; width:160px;">
  72. <div class="rounded-md h-full" style="background-image: url('CHARACTER_IMAGE_LINK'); background-size: cover">
  73. <a href="LINK_TO_CHARACTER" rel="nofollow">
  74. <div class="h-full rounded-md opacity-0 hover:opacity-100 bg-gray-900 bg-opacity-60 duration-300 flex justify-center items-center text-xl text-white font-semibold">NAME</div>
  75. </a>
  76. </div>
  77. </div>
  78. <!-- END of CHARACTER 7 -->
  79.  
  80.  
  81.  
  82.  
  83. </div>
  84.  
  85.  
  86. <!-- this is the EXTERNAL LINKS div -->
  87. <div class="grid md:grid-flow-col-dense grid-flow-row mt-3 py-2 text-gray-400"><!-- you can change the default text color of all the links here (text-gray-400) -->
  88.  
  89. <!-- Button 1 -->
  90. <a class="rounded-md text-center p-2 m-2 hover:text-white bg-gray-900 bg-opacity-80" href="LINK_HERE" rel="nofollow"><!-- change hover:text-white to a different hover:color-number to change the hover color; change bg-gray-900 to change the color of the background color of the button --><i class="fas fa-home-alt fa-md mr-2"><!--change fas fa-home-alt to another icon name to get different icon here --> </i> Button Name</a>
  91. <!-- check my blog for more instructions on changing these https://buzzly.art/~OneAlbatross/blog/template-editing-instructions-and-code-help-->
  92. <!-- End Button 1 -->
  93.  
  94. <!-- Button 2 -->
  95. <a class="rounded-md text-center p-2 m-2 hover:text-white bg-gray-900 bg-opacity-80" href="https://open.spotify.com/user/hungergamer73?si=eb156577f7e94b15" rel="nofollow"><i class="fas fa-star fa-md mr-2"></i> Mains</a>
  96. <!-- End Button 2 -->
  97.  
  98. <!-- Button 3 CODE CREDIT -->
  99. <a class="felx flex-shrink rounded-md text-center py-2 m-2 hover:text-white bg-gray-900 bg-opacity-80 md:order-none order-last" href="https://ko-fi.com/onealbatross" title="Code by OneAlbatross" rel="nofollow"><i class="fad fa-code fa-md -mx-2"></i></a> <!-- this is the code credit, please don't remove. You can move it around the other links if you want. By default it sorts itself to last place when on mobile (order-last), but otherwise appears in the order it appears in this code -->
  100. <!-- End button 3 -->
  101.  
  102. <!-- Button 4 -->
  103. <a class="rounded-md text-center p-2 m-2 hover:text-white bg-gray-900 bg-opacity-80" href="https://toyhou.se/OneAlbatross" rel="nofollow"><i class="fas fa-ticket-alt fa-md mr-2"></i> Fandom</a>
  104. <!-- End Button 4 -->
  105.  
  106. <!-- Button 5 -->
  107. <a class="rounded-md text-center p-2 m-2 hover:text-white bg-gray-900 bg-opacity-80" href="https://toyhou.se/OneAlbatross" rel="nofollow"><i class="fas fa-comments-dollar fa-md mr-2"></i> Tent</a>
  108. <!-- End Button 5 -->
  109.  
  110. <!-- you can copy and paste the button div (from <a> to </a>) under another to get more buttons; though note, they will automatically space themselves evenly and share the same row so names that are too long or too many additional buttons may begin to crowd each other-->
  111.  
  112.  
  113. </div>
  114.  
  115.  
  116.  
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!