Image popup

100%

✓ Published0🌍 Public

Last edited Aug 18, 2010

Created on Aug 18, 2010

The example demonstrates a hover-triggered image popup using only HTML and CSS, showing a thumbnail of a lamb cupcake photograph that expands to reveal a title and description. The page displays a small image at 160 by 240 pixels, and upon hovering, the container widens to 250 pixels, adds a border and padding, and reveals the hidden heading and paragraph text. The code relies on the CSS `:hover` pseudo-class and the `display` property to toggle visibility, with no JavaScript libraries involved. The image is sourced from Flickr, and the effect is achieved entirely through static styling rules in the embedded `<style>` block.

AI-generated description

Similar vizzes

Loading thumbnail…

d3 bootstrap popovers (exhibit A)

A grid of circles fills an SVG, each with a randomized radius. Hovering over a circle triggers a Bootstrap-style popover containing a title and a dynamically generated SVG rectangle whose width corresponds to the circle's radius. The example demonstrates a custom tooltip plugin for d3.v2 that integrates jQuery and Bootstrap CSS, supporting multiple placement and detection modes for interactive data annotation.

GGerHobbelt

62% match

Loading thumbnail…

Gist 280440

This visualization demonstrates a custom hover effect for navigation links, where each link reveals a small dot marker on its left side. The effect is implemented using CSS pseudo-elements, specifically `:hover:before`, which injects the dot image via the `content` property. The dot is positioned absolutely using `top: 6px` and `left: 4px` relative to the link, and the rule applies only when the user hovers over the link. No JavaScript or data libraries are involved; the example relies purely on CSS styling. The `gistfile1.css` file contains the styling, and the dot image is loaded from an external path.

CCaged

60% match

Loading thumbnail…

d3 bootstrap popovers (fix)

A grid of randomly sized circles renders in SVG via d3.js, with each circle linked to a Bootstrap-styled popover that appears on hover. The popover displays a title and an embedded SVG showing a rectangle scaled to ten times the circle’s radius, positioned dynamically using the `tooltip` plugin. The code demonstrates a fixed popover placement with shape-based detection and includes fixes for race conditions in mouseout/mouseenter handling, ensuring the tooltip persists correctly when transitioning between circle and popover.

GGerHobbelt

59% match

Loading thumbnail…

Drag & Drop

This example demonstrates a drag-and-drop interaction where a single draggable image can be moved into any of ten empty placeholder boxes. Using the native HTML5 drag-and-drop API, the JavaScript code listens for `dragstart`, `dragend`, `dragover`, `dragenter`, `dragleave`, and `drop` events to manage the image’s visual state (such as adding a highlight or making it invisible) and to append it to the targeted container. The visual style, including the salmon background and dashed hover indicator, is defined in the accompanying CSS, while the image itself is loaded from a random Unsplash URL.

Jjsong

59% match

Loading thumbnail…

Tippy.js - Tooltip customization

This example demonstrates a minimal tooltip implementation using Tippy.js, showing a hover-triggered popup with the text “My tooltip!” styled with the “translusent” theme. The page loads Tippy.js and Popper.js from a CDN, and the tooltip is initialized with the `tippy()` function. A custom Poppins font is imported, and the button element with the id `tippy` serves as the trigger target. The underlying data visualization context appears limited, as the example focuses on tooltip customization rather than chart rendering.

SSubhendu Karmakar

59% match

Loading thumbnail…

JS Bin

The visualization is a dog image selector that displays a photo of a dog when a user clicks its name in a list. Each click makes the corresponding image visible, while hiding all others, and inserts a caption with the dog's name above the image. The page uses plain JavaScript with `addEventListener` for click handling, `classList.add` to toggle the `active` class, and `createElement`/`insertBefore` to manage the caption. No external libraries are used; the images are loaded from static Flickr URLs via `img` tags.

KKacieW

57% match

Loading thumbnail…

Click to get more donuts

Clicking the "Hungry" button appends a donut image to the page and updates a status message, demonstrating dynamic DOM insertion through JavaScript. The example uses `document.createElement` and `appendChild` to add an `<img>` element sourced from an external PNG URL (pngimg.com) after each click. The code references the tutorial "Adding and Removing Elements on the Fly Using JavaScript" and includes commented-out logic for removing elements, though the active interaction only adds donuts, not removes them. The visual result is a growing row of donut images below the text.

Gguangxinhu

57% match

Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu

57% match