add name of crypto icons when hovered

index.html

@@ -35,26 +35,26 @@
         <div class="container mx-auto px-6 py-4">
             <div class="provider-carousel-container relative overflow-hidden">
                 <div class="provider-carousel flex gap-8 items-center">
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" class="w-6 h-6" alt="BTC"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-6 h-6" alt="ETH"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-6 h-6" alt="USDT"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" class="w-6 h-6" alt="LTC"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" class="w-6 h-6" alt="DOGE"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-6 h-6" alt="SOL"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/cardano-ada-logo.png" class="w-6 h-6" alt="ADA"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-6 h-6" alt="MATIC"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-6 h-6" alt="BNB"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/ripple-xrp-logo.png" class="w-6 h-6" alt="XRP"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" class="w-6 h-6" alt="AVAX"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/polkadot-new-dot-logo.png" class="w-6 h-6" alt="DOT"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/chainlink-link-logo.png" class="w-6 h-6" alt="LINK"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/uniswap-uni-logo.png" class="w-6 h-6" alt="UNI"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/bitcoin-cash-bch-logo.png" class="w-6 h-6" alt="BCH"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" class="w-6 h-6" alt="XLM"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/filecoin-fil-logo.png" class="w-6 h-6" alt="FIL"></span>
-                    <span class="provider-logo text-white"><img src="https://cryptologos.cc/logos/vechain-vet-logo.png" class="w-6 h-6" alt="VET"></span>
-                    <span class="provider-logo text-neonblue"><img src="https://cryptologos.cc/logos/the-graph-grt-logo.png" class="w-6 h-6" alt="GRT"></span>
-                    <span class="provider-logo text-neonmagenta"><img src="https://cryptologos.cc/logos/theta-network-theta-logo.png" class="w-6 h-6" alt="THETA"></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" class="w-6 h-6" alt="BTC"><span class="provider-tooltip">Bitcoin (BTC)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-6 h-6" alt="ETH"><span class="provider-tooltip">Ethereum (ETH)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-6 h-6" alt="USDT"><span class="provider-tooltip">Tether (USDT)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" class="w-6 h-6" alt="LTC"><span class="provider-tooltip">Litecoin (LTC)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" class="w-6 h-6" alt="DOGE"><span class="provider-tooltip">Dogecoin (DOGE)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-6 h-6" alt="SOL"><span class="provider-tooltip">Solana (SOL)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/cardano-ada-logo.png" class="w-6 h-6" alt="ADA"><span class="provider-tooltip">Cardano (ADA)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-6 h-6" alt="MATIC"><span class="provider-tooltip">Polygon (MATIC)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-6 h-6" alt="BNB"><span class="provider-tooltip">BNB (BNB)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/ripple-xrp-logo.png" class="w-6 h-6" alt="XRP"><span class="provider-tooltip">XRP (XRP)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/avalanche-avax-logo.png" class="w-6 h-6" alt="AVAX"><span class="provider-tooltip">Avalanche (AVAX)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/polkadot-new-dot-logo.png" class="w-6 h-6" alt="DOT"><span class="provider-tooltip">Polkadot (DOT)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/chainlink-link-logo.png" class="w-6 h-6" alt="LINK"><span class="provider-tooltip">Chainlink (LINK)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/uniswap-uni-logo.png" class="w-6 h-6" alt="UNI"><span class="provider-tooltip">Uniswap (UNI)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/bitcoin-cash-bch-logo.png" class="w-6 h-6" alt="BCH"><span class="provider-tooltip">Bitcoin Cash (BCH)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/stellar-xlm-logo.png" class="w-6 h-6" alt="XLM"><span class="provider-tooltip">Stellar (XLM)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/filecoin-fil-logo.png" class="w-6 h-6" alt="FIL"><span class="provider-tooltip">Filecoin (FIL)</span></span>
+                        <span class="provider-logo text-white group"><img src="https://cryptologos.cc/logos/vechain-vet-logo.png" class="w-6 h-6" alt="VET"><span class="provider-tooltip">VeChain (VET)</span></span>
+                        <span class="provider-logo text-neonblue group"><img src="https://cryptologos.cc/logos/the-graph-grt-logo.png" class="w-6 h-6" alt="GRT"><span class="provider-tooltip">The Graph (GRT)</span></span>
+                        <span class="provider-logo text-neonmagenta group"><img src="https://cryptologos.cc/logos/theta-network-theta-logo.png" class="w-6 h-6" alt="THETA"><span class="provider-tooltip">Theta Network (THETA)</span></span>
 </div>
 </div>
         </div>
@@ -81,15 +81,15 @@
                     <span class="block text-2xl md:text-4xl mt-4 font-medium text-white">PREMIER CRYPTO CASINO EXPERIENCE COMING SOON</span>
                 </h1>
                 <p class="text-gray-300 text-lg md:text-xl mb-8 flex flex-wrap justify-center gap-4">
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" class="w-5 h-5 mr-2" alt="BTC"> BTC</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-5 h-5 mr-2" alt="ETH"> ETH</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-5 h-5 mr-2" alt="USDT"> USDT</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" class="w-5 h-5 mr-2" alt="LTC"> LTC</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" class="w-5 h-5 mr-2" alt="DOGE"> DOGE</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-5 h-5 mr-2" alt="SOL"> SOL</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/cardano-ada-logo.png" class="w-5 h-5 mr-2" alt="ADA"> ADA</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-5 h-5 mr-2" alt="MATIC"> MATIC</span>
-                    <span class="flex items-center"><img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-5 h-5 mr-2" alt="BNB"> BNB</span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" class="w-5 h-5 mr-2" alt="BTC"> BTC<span class="provider-tooltip">Bitcoin</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-5 h-5 mr-2" alt="ETH"> ETH<span class="provider-tooltip">Ethereum</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/tether-usdt-logo.png" class="w-5 h-5 mr-2" alt="USDT"> USDT<span class="provider-tooltip">Tether</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/litecoin-ltc-logo.png" class="w-5 h-5 mr-2" alt="LTC"> LTC<span class="provider-tooltip">Litecoin</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/dogecoin-doge-logo.png" class="w-5 h-5 mr-2" alt="DOGE"> DOGE<span class="provider-tooltip">Dogecoin</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-5 h-5 mr-2" alt="SOL"> SOL<span class="provider-tooltip">Solana</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/cardano-ada-logo.png" class="w-5 h-5 mr-2" alt="ADA"> ADA<span class="provider-tooltip">Cardano</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/polygon-matic-logo.png" class="w-5 h-5 mr-2" alt="MATIC"> MATIC<span class="provider-tooltip">Polygon</span></span>
+                    <span class="flex items-center group"><img src="https://cryptologos.cc/logos/bnb-bnb-logo.png" class="w-5 h-5 mr-2" alt="BNB"> BNB<span class="provider-tooltip">BNB</span></span>
 </p>
             </div>
 

style.css

@@ -39,6 +39,38 @@ h1, h2, h3, .countdown-timer {
     justify-content: center;
     align-items: center;
     min-width: 120px;
+    position: relative;
+}
+.provider-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0,0,0,0.8);
+    color: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    margin-bottom: 8px;
+    z-index: 10;
+}
+.provider-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: rgba(0,0,0,0.8) transparent transparent transparent;
+}
+.provider-logo:hover .provider-tooltip {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-5px);
 }
 .provider-logo img {
     filter: drop-shadow(0 0 5px currentColor);
@@ -178,6 +210,22 @@ img[alt="SOL"]:hover { transform: scale(1.1); }
 img[alt="ADA"]:hover { transform: scale(1.1); }
 img[alt="MATIC"]:hover { transform: scale(1.1); }
 img[alt="BNB"]:hover { transform: scale(1.1); }
+
+/* Tooltip styles for crypto names in main content */
+.group {
+    position: relative;
+}
+.group .provider-tooltip {
+    bottom: auto;
+    top: 100%;
+    margin-top: 8px;
+    margin-bottom: 0;
+}
+.group .provider-tooltip::after {
+    top: auto;
+    bottom: 100%;
+    border-color: transparent transparent rgba(0,0,0,0.8) transparent;
+}
 /* Footer Styles */
 footer a {
     transition: all 0.3s ease;