How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Today we are going to learn how to create an interactive color-shifting hover card using JavaScript and Tailwind CSS.

What is a color-shifting hover card?

A color-shifting hover card is a type of hover effect that changes the background color of a card or element when the user hovers over it. It is a fun and interactive way to add some visual interest to your website or app. The effect is achieved by using CSS gradients and JavaScript to update the card’s background color based on the user’s cursor position. You can obviously use solid colors instead of gradients, but gradients are more versatile and can be used for more complex effects…

Lets get to the code

The wrapper

The wrapper is the container for the color card. Id’s

• id="colorCard": Assigns a unique ID to the wrapper. This is used to target the wrapper in the JavaScript code. Classes
• relative: Sets the wrapper as a relative element.
• bg-white: Sets the background color of the wrapper to white. This will change the color of the card when the user hovers over it.
• hover:scale-150: Sets the scale of the wrapper to 150% when the user hovers over it.

The title

Id’s

• id="cardTitle": Assigns a unique ID to the title element. Classes
• text-gray-800: Sets the text color of the title to gray-800. This will change the color of the title when the user hovers over it.
• duration-300: Sets the duration of the transition to 300ms.

The paragraph

Id’s

• id="cardText": Assigns a unique ID to the paragraph element. Classes
• text-gray-500: Sets the text color of the paragraph to gray-500. This will change the color of the paragraph when the user hovers over it.
• transition-colors: Sets the transition-colors property of the paragraph to change the color of the paragraph when the user hovers over it.
• duration-300: Sets the duration of the transition to 300ms.

The coordinates

Id’s

• id="coordinates": Assigns a unique ID to the coordinates element.

The buttons

Id’s

• id="primaryBtn": Assigns a unique ID to the primary button.
• id="secondaryBtn": Assigns a unique ID to the secondary button.

Note: Irrelevant classes have been removed from the code for brevity.

<div
   id="colorCard"
   class="relative bg-white hover:scale-150">
   <div class="p-6">
      <h2
         id="cardTitle"
         class="text-gray-800 duration-300">
         Interactive color card
      </h2>
      <p
         id="cardText"
         class="text-gray-500 transition-colors duration-300">
         Move your mouse around to see the magic happen! The colors will
         shift based on your cursor position.
         <br />
         <br />
         <span
            class="font-semibold"
            id="coordinates"
            >X: 0% Y: 0%</span
            >
      </p>
      <div >
         <button
            id="primaryBtn"
            class=" transition-all duration-300 bg-blue-500 text-white hover:bg-blue-600">
         Primary
         </button>
         <button
            id="secondaryBtn"
            class="border transition-all duration-300 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white">
         Secodnary
         </button>
      </div>
   </div>
</div>

The JavaScript

Variables

• card: Assigns the color card element to the card variable.
• cardTitle: Assigns the title element to the cardTitle variable.
• cardText: Assigns the paragraph element to the cardText variable.
• coordinates: Assigns the coordinates element to the coordinates variable.
• primaryBtn: Assigns the primary button element to the primaryBtn variable.
• secondaryBtn: Assigns the secondary button element to the secondaryBtn variable.

The updateColors function

• function updateColors(e): This is a JavaScript function that defines a function named updateColors.
• const bounds = card.getBoundingClientRect(): This line of code gets the bounding client rect of the color card element.
• const x = (e.clientX - bounds.left) / bounds.width: This line of code calculates the x position of the mouse or touch event relative to the left position of the color card element.
• const y = (e.clientY - bounds.top) / bounds.height: This line of code calculates the y position of the mouse or touch event relative to the top position of the color card element.
• const hue1 = Math.floor(x * 360): This line of code calculates the hue value for the first color based on the x position of the mouse or touch event.
• const hue2 = Math.floor(y * 360): This line of code calculates the hue value for the second color based on the y position of the mouse or touch event.
• const color1 = hsl(${hue1}, 70%, 60%)`: This line of code creates a string that represents the first color using the hue value and saturation of 70%.
• const color2 = hsl(${hue2}, 70%, 60%)`: This line of code creates a string that represents the second color using the hue value and saturation of 70%.
• card.style.background = linear-gradient(45deg, ${color1}, ${color2})“: This line of code sets the background of the color card to a linear gradient using the two calculated colors.
• primaryBtn.className = "....": This line of code sets the class of the primary button to the calculated class.
• secondaryBtn.className = "....": This line of code sets the class of the secondary button to the calculated class.
• cardTitle.className = "....": This line of code sets the class of the title element to the calculated class.
• cardText.className = "....": This line of code sets the class of the paragraph element to the calculated class.
• coordinates.textContent = X: ${Math.round(x * 100)}% Y: ${Math.round(y * 100)}%`: This line of code sets the text content of the coordinates element to the calculated coordinates.

The resetStyles function

• function resetStyles(): This is a JavaScript function that defines a function named resetStyles.
• primaryBtn.className = "....": This line of code sets the class of the primary button to the calculated class.
• secondaryBtn.className = "....": This line of code sets the class of the secondary button to the calculated class.
• card.style.background = "white": This line of code sets the background of the color card to white.
• cardTitle.className = "....": This line of code sets the class of the title element to the calculated class.
• cardText.className = "....": This line of code sets the class of the paragraph element to the calculated class.

Event listeners

• card.addEventListener("mousemove", updateColors): This line of code adds a mousemove event listener to the color card element.
• card.addEventListener("mouseleave", resetStyles): This line of code adds a mouseleave event listener to the color card element.

The complete JavaScript

const card = document.getElementById("colorCard");
const cardTitle = document.getElementById("cardTitle");
const cardText = document.getElementById("cardText");
const coordinates = document.getElementById("coordinates");
const primaryBtn = document.getElementById("primaryBtn");
const secondaryBtn = document.getElementById("secondaryBtn");

function updateColors(e) {
   const bounds = card.getBoundingClientRect();
   const x = (e.clientX - bounds.left) / bounds.width;
   const y = (e.clientY - bounds.top) / bounds.height;
   const hue1 = Math.floor(x * 360);
   const hue2 = Math.floor(y * 360);
   const color1 = `hsl(${hue1}, 70%, 60%)`;
   const color2 = `hsl(${hue2}, 70%, 60%)`;
   card.style.background = `linear-gradient(45deg, ${color1}, ${color2})`;

   primaryBtn.className =
      "w-full md:w-auto px-4 py-2 rounded-lg transition-all duration-300 bg-white text-gray-800 hover:bg-gray-100";
   secondaryBtn.className =
      "w-full md:w-auto px-4 py-2 rounded-lg border transition-all duration-300 border-white text-white hover:bg-white hover:text-gray-800";
   cardTitle.className =
      "text-2xl font-bold mb-2 transition-colors duration-300 text-white";
   cardText.className = "transition-colors duration-300 text-white";
   coordinates.textContent = `X: ${Math.round(x * 100)}% Y: ${Math.round(y * 100)}%`;
}

function resetStyles() {
   // Reset with responsive classes
   primaryBtn.className =
      "w-full md:w-auto px-4 py-2 rounded-lg transition-all duration-300 bg-blue-500 text-white hover:bg-blue-600";
   secondaryBtn.className =
      "w-full md:w-auto px-4 py-2 rounded-lg border transition-all duration-300 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white";
   card.style.background = "white";
   cardTitle.className =
      "text-2xl font-bold mb-2 transition-colors duration-300 text-gray-800";
   cardText.className = "transition-colors duration-300 text-gray-600";
}
card.addEventListener("mousemove", updateColors);
card.addEventListener("mouseleave", resetStyles);

Conclusion

This is a simple tutorial that demonstrates how to create an interactive color-shifting hover card using JavaScript and Tailwind CSS.

Hope you enjoyed this tutorial and have a great day!

/Michael Andreuzza