“Attic window” grid child is a div that links to a separate page (hover state has border + box shadow settings)
art credits
Background photo: Aurora Borealis (northern lights) over Alexandria, Ky (Oct 2024) by jmm. Forground photos: Frame with plastic head by jmm. Full moon photo clipped from series by Warren de la Rue, c.1866–1880
CSS: div background image is set to cover (bleed off edges of its parent). HTML: Santa’s size scales (is responsive): width = set to a percentage of the viewport width (vw)
trunk
absolute, transforms (rotate, skew)
code note
Trunk and valentines: all individually sized w own class on absolute position with diff edge settings; Valentines have transforms (skew & rotate)
art credits
Vintage b&w engraved illustration (trunk): source unknown. . Miniature valentine stickers found in an Atlantic Card Co sample book in the Winterthur Library
div contains a background image (setting/city) and has html images (typewriter, skate). Parent is relative position; child elements are absolute position
art credits
Vintage engraved b&w illustration: source unknown. . 1970s owl clock photo: jmm. . Cityscape: Dr. Julius Neubronner’s miniature pigeon camera series, c.1910.
Objects: all absolute position inside their parent div (relative position). Each has its own settings in relation to the parent’s edges (top, right, bottom, left).
Object photography —jmm. . Objects include: jello mold; milagros, metal foils from a 19th century French sales sample book (Col. 838, Winterthur Library); and from the Smithsonian: “Bowl,” w yellow bird (late 9th-11th century, Iran, 1972-16-1) and “Design of animals, birds and putti in yellow and tan,” textile, 17th century, Italy, CC0 license
min height, background-blend-mode (hard light), link in new tab
code note
Center div: min-height (size in px) helps element proportions to stay intact. . Parent container of window/landscape image has background-blend-mode (hard light). . Bird is position absolute (its parent div = relative). . “Letters” link has a blank target to open in a separate browser tab.
art credits
“Yellow room with yellow couch,” — jmm . “Yellow Crowned Weaver” from William Home Lizars’ plate 32, “Birds of Western Africa,” 1837; CC0 license, Smithsonian Museum collection. . Window view: Caspar David Friedrich, “Statue of the Madonna in the Mountains,” 1804. . Letter mail engraving: source unknown
Fill a parent container with a content image (html) using object-fit (css). Set image to absolute. Manually set image width and height. Overflow hidden on the parent crops the image.
Tintype photograph of the designer’s great-great-grandmother, c1875
directory
hover scale + transform origin
code note
Fill a parent container with a content image (html) using object-fit (css). Set image to absolute. Manually set image width and height. Overflow hidden on the parent crops the image.
html image (object-fit/fit), overflow hidden, clip-path, change shape (hover)
css note
Crop an html image in a shape: Fill a parent container with a content image (html) using object-fit (css). Set image to absolute. Manually set image width and height. Overflow hidden on the parent crops the image. . Custom div shape: uses css clip-path via Clip Path Bae plug-in by Keegan Leary.
Family photo album passed down through generations, early 1900s
storage
positon sticky, background image (cover)
css note
Child container w house img is position: sticky; Container’s parent needs to be taller than sticky element and on position relative. Cannot use overflow: hidden on any elements involved w position sticky.
Variation on Ran Segall’s dark mode technique: Llightswitch button (sun) has a mouse-click interaction that starts an animation: click 1 changes button element background color and turns visibility of dark overlay element off; click 2 changes button background color and turns visibility of dark overlay back on.
Sun: vintage engraving, source unknown . Blue French candy label (background): “Sugar or candied apple at or of Rouen,” 1830–1855, 88x195.008; courtesy Winterthur Museum, Garden & Library . Round frames: “French buttons,” The Metropolitan Museum of Art, New York
Background-size: contain; (shows all in parent without cropping). All other images on absolute position; bed has 3D transform (parent must have child perspective value).
art credits
“Yellow TV in yellow room,” photo —jmm . Embroidery (top left): thrift store find . Side table: Gillow & Co., Gillow & Co Drawings, 1780–1810, Col. 257
Floor: css background image, position bottom, no-repeat. All other images on absolute position. . Linked video is sized to fill small, parent div with border-radius. Overflow of div is hidden to crop video (child) to its oval shape. Oval div is on absolute position. Related:
Floor: “Piece,” (silk, Italian), The Metropolitan Museum of Art, New York, Rogers Fund, 1940. . Mirror: Gillow & Co., Gillow & Co Drawings, 1780–1810, Col. 257, Winterthur . Video: “To New Horizons,” 1940 via Internet Archive
Balcony view #1: Claude Lorrain. “Panorama from the Sasso,” 1649/1655 . Balcony view #2: Van Gogh. “The Poets Garden,” 1888 . Balcony view #3: Harald Sohlberg “Fisherman’s Cottage,” 1906
transforms with transitions (scale, rotate, move/translate), absolute positioning
css note
Objects have transforms (scale, move, rotate) on hover state. Transition applied to non-hover state to create smoothness. Position of b&w images = absolute
Parent: relative position and has a background image (cover). Small objects: each with position: absolute and an individual class w size + placement settings
art credits
“Red table in green room with green-striped floor,” jmm . Miniature book photos, jmm . Globe: Ruth Wright, “Terrestrial Sampler,” 1815, courtesy Winterthur Museum, Garden & Library; photo by Victoria Finlay
iframe technique from Elaine C: 1) Give the HTML embed a class name. 2) Give the class size 100% (width) 100% (height) 3) Include her code snippet in an html Embed element (see link below)
iframe spools in “Planetary System. Eclipse of the Sun. The Moon. The Zodiacal Light. Meteoric Shower” by Levi Walter Yaggy, Western Publishing House (pub.) 1887.
Elements hovering over svg blob are position absolute in their parent, stacked with z-index value . Clay figure: looping keyframe animation with scale, move, rotate & opacity transforms . Clock: scroll-triggered interaction (rotate transform)
“Pink Bed,” — jmm . Dreamscape: vintage clock and alligator (source unknown) . Eye miniature: Philadelphia Museum of Art . Clay figurine: “Worker Shabti of Henettawy (C), Daughter of Isetemkheb.” Third Intermediate Period, Egypt, c. 990–970 B.C. Made of ceramic (faience), The Metropolitan Museum of Art, New York, Rogers Fund, 1925
Rows in the grid of the “Blue Suite” section have min/max values (vs auto) . bejeweled eyes have opacity + hover transform w scale & border-radius, transition
Basket: background image on div; div contains child div with blendmode (overlay) . Dog: position absolute.
art credits
Basket drawing from “Nuremberg Magzin,” 1808–1812 . Pug: paper toy from boxed set, “Father Tucks’ Mechanical Animals Series 5, 6 Pet Dogs,” Col 383 . Both objects courtesy of Winterthur Museum, Garden & Library
Hallway window: a div w vertical padding (opens its height), contains a background image (Japanese painted landscape) set via css to position: fixed; creates illusion of movement
art credits
Furniture: drawings from the Gillow & Co. catalog in the collection of Winterthur Museum, Garden & Library. . Landscape in “window:” Misty Dawn at the Seashore by Okada Hanko, Japan, 19th century. Collection: Metropolitan Museum of Art.
Vignette contains bird image and a div containing the background bouqet flowers; bouquet div has blending/blend-mde effect (“screen”)
art credits
Bird: vintage b&w engraved illustration: source unknown . Background flowers from a paper flower arranging game in the Maxine Waldron Collection of the Winterthur Library (Col. 121, Series VI.E—Miscellaneous Games)
hover (3D transform + transition), sound on-click, head tag javascript, audio
css note
Door hover state: has two separate transforms (rotate and scale); its direct parent has a high children perspective setting, allowing it to look 3D. Transition applied to parent’s normal state (not hover)
background-size (contain), background-position (bottom, left), absolute position
code note
Background and foreground position differences: background via css (carpet). Objects via html (absolute position), parent is relative
art credits
catalog ephemera
kitchen
overflow (scroll), horizontal scroll
code note
Scrolling shelves: each is a div on flex with a designated height set to scroll on overflow-x axis (horizontal); Yellow pattern: background image on parent div.
“Dining room with red furniture” — jmm . Dessert mold: vintage colorized engraving (source unknown)
candles
hover (opacity), flexbox, link block
css note
Vignette: main div links to another page; hover state has stroke change and subtle box shadow. Candlestick opacity: its parent has 30% opacity, its hover has 100%. Its parent is also on absolute to cover its parent
art credits
“Green door and green wall,” — jmm . Candlestick: vintage b&w engraved illustration (source unknown)
office
Esteemed Innovator,Greetings from the mist-shrouded valleys of Luminara! Our royal council has heard whispers of your remarkable ingenuity, carried on the winds from distant lands. Your reputation as a visionary entrepreneur who transforms imagination into reality has reached even our most secluded mountain chambers.We have learned of your extraordinary ability to weave solutions from the simplest of threads, to breathe life into concepts that others might dismiss as mere flights of fancy. Your home office—a crucible of creativity—has not escaped our notice.The Kingdom of Luminara requests your unique expertise for a most extraordinary endeavor. We seek a collaborator who can bridge the impossible, someone who understands that true innovation knows no boundaries. Our royal archives contain a challenge that has confounded our greatest minds for generations—a puzzle that we believe only an independent thinker like yourself could unravel.We are prepared to offer compensation beyond mere currency: access to ancient knowledge, rare resources, and a partnership that could transform both our worlds. Your creativity is a treasure we wish to unlock.Should you accept our invitation, a diplomatic envoy will arrive with further details, sealed with the royal insignia of the Luminarian Crown.Awaiting your response with great anticipation,Sovereign Aria Moonweaver Royal Diplomatic Directorate
overflow (scroll), vertical scroll
css note
Scrolling letter: letterhead div has a designated height + vertical content is set to scroll on overflow-y (vertical); Letterhead sheet: background image on div.
Phone: vintage b&w engraved illustration: source unknown . Vintage letterhead for Bolling & Powers Livestock, Nashville, TN with faint handwriting visible on the backside of the sheet. . Filler text in office memo generated in Anthropic’s Claude.
powder room
background-size (cover), background-position
art credits
“Yellow sink in yellow room,” — jmm, 2024
laundry
absolute position
css note
Child elements on absolute positioning; parent is relative position. Each individually placed in parent.
“Red media cabinet in orange room,” —jmm. Donkey game poster: Zimmerling, Charles, Copyright Claimant. “The donkey party game of putting the tail on the donkey. The funniest novelty of the age.” [Place not identified: Publisher not identified] Photograph. 1889.
Wood table surface: printed wood grain on back of antique Dutch child’s game board . Circles: scans of old, paper bingo chips . Playing Card: “Jack of Diamonds,” 1800-1835. 1958.0067.036. Paper toy: “Pastime for Little Fingers,” 1881.
Border-radius property rounds corners of an element. Can round all or individual corners with px values. A value of 50% creates an oval (out of rectangular elements) or a circle (out of square elements).
Background: pattern from a fiberglass tray c1965 . Drawing of pitcher: G. H. Bestelmeier, “Magazin von verschiedenen kunst und andern nüzlichen sachen, zur lehrreichen und angenehmen unterhaltung der jugend, als auch für liebhaber der Künste und wissenschaften, welche stücke meist vorrathig zu finden,” 1808–1812. TS2301 B56 TC; courtesy Winterthur Museum, Garden & Library