Anjanesh

onhover Larger Image Popup / ToolTip

onhover Larger Image Popup / ToolTip

Using flowbite's popover component to display a zoomed in version of a thumbnail image

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·

1 min read

Something I've been searching for a long time was to have a larger image shown on mouse hover the thumbnail image using TailWindCSS. I could only find a solution using Flowbite's popover component which requires JavaScript. Hopefully I can update this post in the future when this can be achieved using CSS/TailWindCSS alone.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>onhover Larger Image Popup / ToolTip</title>
    <script src="https://cdn.tailwindcss.com"></script>    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>    
</head>
<body>

    <div
        class="mt-5 ml-5 ring-2 ring-offset-2 group block w-32 aspect-w-10 aspect-h-7 rounded-lg bg-gray-100 overflow-hidden"
        data-popover-target="popover-default-1"
    >
        <img
            src="https://anjanesh.s3.amazonaws.com/island.webp"
            alt="Island"
            class="object-cover pointer-events-none"
            width="150"
        />
    </div>

    <div data-popover id="popover-default-1" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
        <div class="px-3 py-2 bg-gray-100 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
            <h3 class="font-semibold text-gray-900 dark:text-white">Island</h3>
        </div>
        <div class="px-3 py-2">
            <img
                src="https://anjanesh.s3.amazonaws.com/island.webp"
                alt="Island"
                class="object-cover pointer-events-none"
                width="750"
            />
        </div>        
    </div>

</body>
</html>

  1. Don't use cdn.tailwindcss.com in production.

  2. Also, for the thumbnail image, use an appropriate thumbnail sized version of the image instead of shrinking it using the width or height attributes.

Demo : https://anjanesh.s3.amazonaws.com/demo/onhover-Larger-Image-Popup-ToolTip.html

imagesHTMLTailwind CSSFlowbite