How To Have A Pop Up Show When You Hover Over An Image In WordPress

Bywsadmin

To create a popup that appears when you hover over an image in WordPress, you’ll need to use a combination of HTML, CSS, and JavaScript (or jQuery). This is an article on how to create a popup that appears when you hover over an image in WordPress without using a plugin. We’ll use HTML, CSS, and JavaScript/jQuery.

Step 1: Insert the Image and Popup Structure in WordPress

First, you’ll need to insert the HTML structure into your WordPress page or post. To do this:

1.1. Edit Your Page/Post

  • Go to your WordPress Dashboard.
  • Navigate to Pages or Posts and select the page/post you want to edit.
  • Click Edit.

1.2. Add an HTML Block

In the WordPress block editor, you can use a Custom HTML block to insert the HTML code directly.

  • Click on the “+” (Add Block) button.
  • Choose Custom HTML.

1.3. Add HTML Code

Inside the HTML block, add the following code:

<div class=”image-popup-container”>

    <img src=”YOUR_IMAGE_URL” alt=”Hover Image” class=”hover-image”>

    <div class=”popup-content”>

        <p>This is the content of your popup!</p>

    </div>

</div>

Replace YOUR_IMAGE_URL with the actual URL of your image.

Explanation:

  • <div class=”image-popup-container”>: This is the container for the image and the popup content.
  • <img src=”YOUR_IMAGE_URL” alt=”Hover Image” class=”hover-image”>: This is your image. You can adjust the size of this image by modifying the CSS later.
  • <div class=”popup-content”>: This is the popup that will appear when you hover over the image.

Step 2: Add Custom CSS for Styling the Image and Popup

Next, you’ll need to add some CSS to style the image and the popup. This can be done in the WordPress Customizer or directly in your theme’s CSS file.

2.1. Go to WordPress Customizer

  • From the WordPress dashboard, navigate to Appearance > Customize.
  • Click on Additional CSS.

2.2. Add CSS Code

Paste the following CSS into the Additional CSS section:

/* Container for image and popup */

.image-popup-container {

    position: relative;

    display: inline-block;

}

/* Style for the image */

.hover-image {

    width: 100%; /* You can adjust this width as per your needs */

    height: auto;

    display: block;

}

/* The popup content */

.popup-content {

    display: none; /* Hidden by default */

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background-color: rgba(0, 0, 0, 0.7);

    color: white;

    padding: 20px;

    border-radius: 8px;

    text-align: center;

    width: 200px; /* Adjust as needed */

}

/* Show popup on hover */

.image-popup-container:hover .popup-content {

    display: block;

}

Explanation:

  • .image-popup-container: This class makes the container of the image and popup positioned relative to the image so that the popup can be absolutely positioned over it.
    .hover-image: This class styles the image. You can adjust the width and height based on your design requirements.
    .popup-content: This class styles the popup. By default, the popup is hidden (display: none;), and it’s only shown when hovering over the image.
  • .image-popup-container:hover .popup-content: This rule makes the popup appear when you hover over the image container.

Step 3: Add Custom JavaScript/jQuery (for Animation)

If you’d like to add animations or smooth effects when the popup appears, you can use jQuery. Here, we’ll add a fade effect.

3.1. Add jQuery Script

You can add custom JavaScript by either editing your theme files or using the Customizer.

3.1.1. Use the Customizer to Add JavaScript
  • Go to Appearance > Customize.
  • Scroll down and click on Additional CSS/JS or if that option is unavailable, use a plugin like Simple Custom CSS and JS to add your JavaScript.
3.1.2. Add the jQuery Code

Insert the following JavaScript/jQuery code into your site:

jQuery(document).ready(function($) {

    $(‘.image-popup-container’).hover(

        function() {

            $(this).find(‘.popup-content’).fadeIn();

        },

        function() {

            $(this).find(‘.popup-content’).fadeOut();

        }

    );

});

Explanation:

  • This jQuery script ensures that when you hover over the image container, the .popup-content will fade in, and when you hover out, it will fade out.
  • fadeIn() and fadeOut() provide a smooth transition effect.

3.2. How to Add the JavaScript Code to Your Site

  • Via the Customizer: If your theme supports it, you can directly add JavaScript via Appearance > Customize > Additional CSS/JS.
  • By Using a Plugin: You can install a plugin like Simple Custom CSS and JS, then add the jQuery code to it.
  • By Editing the Theme’s Footer: Alternatively, you can manually add the JavaScript code to the footer.php file in your theme. This would look like:

<script type=”text/javascript”>

    jQuery(document).ready(function($) {

        $(‘.image-popup-container’).hover(

            function() {

                $(this).find(‘.popup-content’).fadeIn();

            },

            function() {

                $(this).find(‘.popup-content’).fadeOut();

            }

        );

    });

</script>

Place this code right before the closing </body> tag in footer.php.

Step 4: Save Your Changes and Preview

Once you’ve added the HTML, CSS, and JavaScript:

  1. Save your changes.
  2. Preview your page/post in WordPress.
  3. Hover over the image to see the popup appear smoothly when you hover over the image.

Optional: Customize Further

  • Content in Popup: You can add anything inside the .popup-content div—text, images, or even a video.
    Adjust Popup Position: If you want the popup to appear at a different position (like above or to the left of the image), adjust the top and left values in the .popup-content CSS.
  • Popup Animation: You can change the popup’s fade effect to something else like slide-in or scale effect using CSS transitions.

Similar Posts