Advanced Hover Effects for Your Website

Engage users with interactive hover effects and smooth transitions. Perfect for adding value to your website, campaigns, and product displays!

Hover Info Box

Hover over the word below to display more information. This box includes a close button for users to dismiss the box.

Hover over this word to see more info.

× This is the additional information.
Click here for more details.

Code Example:

    <p>Hover over this <span id="hover-word" class="font-weight-bold" data-close="true">word</span> to see more info.</p>
    <div id="hover-info-box">
      <span class="close-btn" id="close-btn">&times;</span>
      This is the additional information. <br />
      <a href="https://example.com" target="_blank">Click here for more details</a>.
    </div>

Special Offer Popup

Hover over the offer below to see details. This popup is perfect for engaging users with special promotions.

Hover over this Special Offer to see details.

×

Exclusive Offer Just for You!

Get a 50% discount on your next purchase. Limited time only!

Get the Offer

Code Example:

    <p>Hover over this <span id="special-offer" class="font-weight-bold" data-close="true">Special Offer</span> to see details.</p>
    <div id="offer-info-box">
      <span class="close-btn" id="offer-close-btn">&times;</span>
      <h3>Exclusive Offer Just for You!</h3>
      <p>Get a 50% discount on your next purchase. Limited time only!</p>
      <a href="#" class="offer-button">Get the Offer</a>
    </div>

External Link Warning

Click on the links below, and a popup will warn you that you are about to leave the site. This is useful for keeping users informed when navigating to third-party sites.

Click this link to go to Example.com

Click this link to go to AnotherExample.com

Code Example:

    <p>Click this link to go to <a href="https://example.com" class="external-link">Example.com</a></p>
    <p>Click this link to go to <a href="https://anotherexample.com" class="external-link">AnotherExample.com</a></p>
    <div id="external-link-popup">
      <span class="close-btn" id="external-close-btn">&times;</span>
      <h3>You are leaving this site</h3>
      <p>You will be taken to <span id="external-link-destination">example.com</span>.</p>
      <a href="#" target="_blank" class="external-continue-button" id="continue-button">Continue to example.com</a>
    </div>

Social Media Popup

Hover over the social media icons below to prompt users to like or follow your page. This helps drive engagement directly from your website.

×

Follow us on Social Media

Stay updated with our latest news and offers!

Code Example:

    <div class="social-icons">
      <span class="social-icon" id="facebook-icon" data-social="Facebook" data-position="below">Facebook</span>
      <span class="social-icon" id="twitter-icon" data-social="Twitter" data-position="above">Twitter</span>
      <span class="social-icon" id="instagram-icon" data-social="Instagram" data-position="below">Instagram</span>
    </div>

    <div id="social-popup">
      <span class="close-btn" id="social-close-btn">&times;</span>
      <h3 id="social-title">Follow us on Social Media</h3>
      <button id="like-button">Like our Page</button>
      <p id="social-description">Stay updated with our latest news and offers!</p>
    </div>

Getting started with jsHover

To implement the hover info box, simply place the text you want users to hover over inside a <span> element with an ID. The corresponding info box will be dynamically positioned using the provided JavaScript code.
Yes! You can fully customize the popup appearance by modifying the associated CSS files. You can adjust the colors, fonts, box shadows, and even the transitions to suit your website's style.
Simply add the .external-link class to any anchor (<a>) tag that directs users to an external website. The popup will warn users that they are leaving the site, with an option to continue or close the popup.
You can control whether the popup appears above or below the social media icons by setting the data-position attribute on each social icon. Use data-position="above" to display the popup above the icon or data-position="below" to display it below.