Hover Image
Project list that shows a floating image preview following your cursor on hover.
Preview and code
index.html
<!--
Ported to plain HTML/CSS/JS for OwnlyPlans from ObsidianUI (https://github.com/Atharvsinh-codez/ObsidianUI)
MIT License — Copyright (c) 2026 ObsidianUI
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
-->
<div class="op-hover-img-container">
<div class="op-hover-img-projects">
<div class="op-hover-img-project"><h2>Quiet Peaks</h2><p>Mountain studies</p></div>
<div class="op-hover-img-project"><h2>Open Water</h2><p>Coastal series</p></div>
<div class="op-hover-img-project"><h2>City Lines</h2><p>Urban geometry</p></div>
</div>
<div class="op-hover-img-thumbnail-wrapper">
<div class="op-hover-img-thumbnail"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20800%20500%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22800%22%20height%3D%22500%22%20fill%3D%22%23f4c9a8%22/%3E%3Cpath%20d%3D%22M0%20360%20L180%20170%20L300%20280%20L460%20110%20L640%20300%20L800%20190%20L800%20500%20L0%20500Z%22%20fill%3D%22%237c5c8a%22/%3E%3Cpath%20d%3D%22M0%20420%20L220%20280%20L380%20380%20L560%20250%20L800%20400%20L800%20500%20L0%20500Z%22%20fill%3D%22%233d3456%22/%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22110%22%20r%3D%2246%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3C/svg%3E" alt="Quiet Peaks"></div>
<div class="op-hover-img-thumbnail"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20800%20500%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22800%22%20height%3D%22500%22%20fill%3D%22%23bfe3f2%22/%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%22230%22%20r%3D%2290%22%20fill%3D%22%23fff%22%20opacity%3D%22.9%22/%3E%3Crect%20y%3D%22260%22%20width%3D%22800%22%20height%3D%22240%22%20fill%3D%22%232f7fa8%22/%3E%3Cpath%20d%3D%22M0%20300%20Q100%20285%20200%20300%20T400%20300%20T600%20300%20T800%20300%20V500%20H0Z%22%20fill%3D%22%231d4f73%22/%3E%3Cpath%20d%3D%22M0%20360%20Q100%20345%20200%20360%20T400%20360%20T600%20360%20T800%20360%20V500%20H0Z%22%20fill%3D%22%232f7fa8%22%20opacity%3D%22.7%22/%3E%3C/svg%3E" alt="Open Water"></div>
<div class="op-hover-img-thumbnail"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20800%20500%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22800%22%20height%3D%22500%22%20fill%3D%22%23ece6da%22/%3E%3Crect%20x%3D%2280%22%20y%3D%22160%22%20width%3D%22120%22%20height%3D%22340%22%20fill%3D%22%23d96b4f%22/%3E%3Crect%20x%3D%22220%22%20y%3D%2280%22%20width%3D%22140%22%20height%3D%22420%22%20fill%3D%22%232c3e50%22/%3E%3Crect%20x%3D%22380%22%20y%3D%22200%22%20width%3D%22110%22%20height%3D%22300%22%20fill%3D%22%23d96b4f%22/%3E%3Crect%20x%3D%22510%22%20y%3D%22120%22%20width%3D%22150%22%20height%3D%22380%22%20fill%3D%22%232c3e50%22/%3E%3Crect%20x%3D%22680%22%20y%3D%22240%22%20width%3D%2290%22%20height%3D%22260%22%20fill%3D%22%23d96b4f%22/%3E%3C/svg%3E" alt="City Lines"></div>
</div>
</div>
styles.css
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.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}
.op-hover-img-projects{display:flex;flex-direction:column;width:100%;max-width:1200px}
.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}
.op-hover-img-project:last-child{border-bottom:1px solid var(--hi-border)}
.op-hover-img-project h2{font-size:2.5rem;font-weight:500;letter-spacing:-.02em;transition:transform .5s ease;margin:0}
.op-hover-img-project p{font-size:1rem;font-weight:400;color:var(--hi-text-muted);transition:transform .5s ease;margin:0}
.op-hover-img-project:hover{opacity:.5}
.op-hover-img-project:hover h2{transform:translateX(-15px)}
.op-hover-img-project:hover p{transform:translateX(15px)}
.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)}
.op-hover-img-thumbnail{width:100%;height:100%;flex-shrink:0}
.op-hover-img-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
@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}}
script.js
(function(){
// Small tween helper standing in for GSAP's quickTo / to with power2.out and power3.out easing.
var p2=function(t){return 1-Math.pow(1-t,3)}, p3=function(t){return 1-Math.pow(1-t,4)};
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)}}}
document.querySelectorAll('.op-hover-img-container').forEach(function(root){
var thumb=root.querySelector('.op-hover-img-thumbnail-wrapper'),list=root.querySelector('.op-hover-img-projects'),thumbs=thumb.querySelectorAll('.op-hover-img-thumbnail');
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+')'}
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()});
var Yp=tweener(function(v){thumbs.forEach(function(t){t.style.transform='translateY('+v+'%)'})});
list.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect(),hw=thumb.offsetWidth/2,hh=thumb.offsetHeight/2,i=16;
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)});
list.addEventListener('mouseleave',function(){S.to(0,.3,p2)});
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)})});
});
})();About
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.