{ "id": "bhaskar/hover-image", "kind": "component", "title": "Hover Image", "summary": "Project list that shows a floating image preview following your cursor on hover.", "author": "Admin", "stars": 0, "url": "https://ownlyplans.com/bhaskar/hover-image/", "stack": [ "CSS", "HTML", "JavaScript" ], "tools": [ "claude-code", "cursor", "lovable" ], "difficulty": "beginner", "license": "mit", "version": "1.0", "overview": "Project list that shows a floating image preview following your cursor on hover. Ported to plain HTML, CSS and JavaScript from ObsidianUI (github.com/Atharvsinh-codez/ObsidianUI), which is released under the MIT License. The original copyright notice is kept in the code.", "steps": [], "files": [], "install": "", "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.", "component": { "category": "Cards", "html": "\n
\n
\n

Quiet Peaks

Mountain studies

\n

Open Water

Coastal series

\n

City Lines

Urban geometry

\n
\n
\n
\"Quiet
\n
\"Open
\n
\"City
\n
\n
", "css": "/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */\n.op-hover-img-container{--hi-bg:#f2f2f2;--hi-text:#000;--hi-text-muted:#666;--hi-border:rgba(0,0,0,.15);font-family:\"Raleway\",\"Inter\",system-ui,sans-serif;min-height:100vh;width:100%;background:var(--hi-bg);color:var(--hi-text);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}\n.op-hover-img-projects{display:flex;flex-direction:column;width:100%;max-width:1200px}\n.op-hover-img-project{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:2rem 4rem;border-top:1px solid var(--hi-border);cursor:pointer;transition:opacity .5s ease}\n.op-hover-img-project:last-child{border-bottom:1px solid var(--hi-border)}\n.op-hover-img-project h2{font-size:2.5rem;font-weight:500;letter-spacing:-.02em;transition:transform .5s ease;margin:0}\n.op-hover-img-project p{font-size:1rem;font-weight:400;color:var(--hi-text-muted);transition:transform .5s ease;margin:0}\n.op-hover-img-project:hover{opacity:.5}\n.op-hover-img-project:hover h2{transform:translateX(-15px)}\n.op-hover-img-project:hover p{transform:translateX(15px)}\n.op-hover-img-thumbnail-wrapper{position:absolute;width:400px;height:250px;display:flex;flex-direction:column;overflow:hidden;pointer-events:none;top:0;left:0;transform-origin:center center;z-index:100;border-radius:12px;box-shadow:0 25px 50px -12px rgba(0,0,0,.3);transform:translate(-50%,-50%) scale(0)}\n.op-hover-img-thumbnail{width:100%;height:100%;flex-shrink:0}\n.op-hover-img-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}\n@media (max-width:768px){.op-hover-img-project{padding:1.5rem 2rem}.op-hover-img-project h2{font-size:1.75rem}.op-hover-img-project p{font-size:.875rem}.op-hover-img-thumbnail-wrapper{display:none}}", "js": "(function(){\n // Small tween helper standing in for GSAP's quickTo / to with power2.out and power3.out easing.\n var p2=function(t){return 1-Math.pow(1-t,3)}, p3=function(t){return 1-Math.pow(1-t,4)};\n function tweener(apply){var cur=0,raf=0;return {get:function(){return cur},set:function(v){cur=v;apply(v)},to:function(v,dur,ease){cancelAnimationFrame(raf);var from=cur,t0=performance.now();(function step(now){var k=Math.min(1,(now-t0)/(dur*1000));cur=from+(v-from)*ease(k);apply(cur);if(k<1)raf=requestAnimationFrame(step)})(t0)}}}\n document.querySelectorAll('.op-hover-img-container').forEach(function(root){\n var thumb=root.querySelector('.op-hover-img-thumbnail-wrapper'),list=root.querySelector('.op-hover-img-projects'),thumbs=thumb.querySelectorAll('.op-hover-img-thumbnail');\n var s={x:0,y:0,sc:0};function paint(){thumb.style.transform='translate('+s.x+'px,'+s.y+'px) translate(-50%,-50%) scale('+s.sc+')'}\n var X=tweener(function(v){s.x=v;paint()}),Y=tweener(function(v){s.y=v;paint()}),S=tweener(function(v){s.sc=v;paint()});\n var Yp=tweener(function(v){thumbs.forEach(function(t){t.style.transform='translateY('+v+'%)'})});\n list.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect(),hw=thumb.offsetWidth/2,hh=thumb.offsetHeight/2,i=16;\n X.to(Math.max(hw+i,Math.min(r.width-hw-i,e.clientX-r.left)),.4,p3);Y.to(Math.max(hh+i,Math.min(r.height-hh-i,e.clientY-r.top)),.4,p3)});\n list.addEventListener('mouseleave',function(){S.to(0,.3,p2)});\n root.querySelectorAll('.op-hover-img-project').forEach(function(p,idx){p.addEventListener('mouseenter',function(){S.to(1,.4,p2);Yp.to(-100*idx,.4,p2)})});\n });\n})();", "react": "", "dependencies": [], "install": "", "licence_notice": "" } }