Print Corner Curl
A photo print's corner curls back to reveal shooting information on the reverse.
A photo print's corner curls back to reveal shooting information on the reverse.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<div class="tbx-1246"><a href="#portfolio" class="print"><span class="picture"><span class="sun"></span><span class="hill h1"></span><span class="hill h2"></span></span><span class="back"><strong>North Shore</strong><small>35mm — Summer 2026</small></span><span class="curl" aria-hidden="true"></span><span class="credit">ARCHIVE NO. 18</span></a></div>CSS
.tbx-1246{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1246 *, .tbx-1246 *::before,.tbx-1246 *::after{box-sizing:border-box}
.tbx-1246{background:#e6e7e1}.tbx-1246 .print{position:relative;display:block;width:min(100%,248px);height:161px;padding:9px;background:#fff;box-shadow:0 9px 18px #323e3d2c;transform:rotate(-2deg);text-decoration:none;transition:transform .45s}.tbx-1246 .picture{display:block;position:absolute;inset:9px 9px 26px;overflow:hidden;background:linear-gradient(#8cbfbd,#efc9a2 70%);isolation:isolate}.tbx-1246 .sun{position:absolute;right:40px;top:15px;width:35px;height:35px;background:#fff2cd;border-radius:50%}.tbx-1246 .hill{position:absolute;bottom:-45px;width:120%;height:120px;border-radius:50% 45% 0 0}.tbx-1246 .h1{left:-15%;background:#436c72;transform:rotate(-13deg)}.tbx-1246 .h2{left:35%;background:#244958;transform:rotate(18deg);bottom:-59px}.tbx-1246 .back{position:absolute;right:9px;bottom:28px;width:105px;height:70px;padding:18px 8px 6px;background:#efe3d4;color:#5b493f;display:grid;align-content:center;gap:5px;text-align:center;box-shadow:0 -3px 8px #2222}.tbx-1246 .back strong{font-size:11px}.tbx-1246 .back small{font-size:8px}.tbx-1246 .curl{position:absolute;right:9px;bottom:26px;width:112px;height:80px;background:linear-gradient(135deg,#2d586b 0%,#83b1ae 40%,#d2ddd0 60%,#fff 100%);transform-origin:bottom right;transform:rotate(0);clip-path:polygon(100% 0,100% 100%,0 100%);transition:transform .55s cubic-bezier(.2,.8,.2,1);box-shadow:0 3px 5px #3333}.tbx-1246 .credit{position:absolute;bottom:8px;left:10px;font-size:8px;color:#8c7e71;letter-spacing:.13em}.tbx-1246 .print:is(:hover,:focus-visible){transform:rotate(1deg) translateY(-3px)}.tbx-1246 .print:is(:hover,:focus-visible) .curl{transform:rotate(-74deg)}
@media(prefers-reduced-motion:reduce){.tbx-1246 *, .tbx-1246 *::before, .tbx-1246 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for portfolio galleries and image galleries.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.
