Image Reveal on Hover
Title list; on hover a clip-masked thumbnail reveals and follows the cursor.
How to use it
- Paste the HTML where the components should appear. Include the script tags at the top once per page.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Image Reveal on Hover · NedDev · eigen werk. -->
<!-- benodigd, één keer per pagina: -->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<div class="jouw-container">
<div class="irc-list"><a class="irc-row" data-c="#F5480F"><span>Westland Veld</span></a><a class="irc-row" data-c="#0a0a0a"><span>Glastuinbouw</span></a><a class="irc-row" data-c="#1d4ed8"><span>Schoonmaak</span></a><a class="irc-row" data-c="#047857"><span>Logistiek</span></a></div><div class="irc-thumb"></div>
</div>/* Image Reveal on Hover · NedDev · eigen werk. */
.irc-list{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 9%;background:#fff;font-family:'Switzer',sans-serif}
.irc-row{position:relative;display:block;padding:.5em 0;font-weight:800;font-size:clamp(20px,5.4vw,40px);letter-spacing:-.02em;color:#0a0a0a;text-decoration:none;border-bottom:1px solid #e9e9e9;transition:color .35s,padding-left .35s;cursor:pointer;z-index:2}
.irc-row:hover{color:#F5480F;padding-left:18px}
.irc-thumb{position:absolute;width:140px;height:96px;border-radius:10px;background:var(--c,#F5480F);pointer-events:none;z-index:1;opacity:0;transform:translate(-50%,-50%) scale(.6);clip-path:inset(0 100% 0 0);transition:opacity .25s}
.irc-thumb::after{content:'';position:absolute;inset:0;border-radius:10px;background:radial-gradient(120% 120% at 30% 20%,rgba(255,255,255,.35),transparent 60%)}// Image Reveal on Hover · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var thumb=root.querySelector('.irc-thumb');var rows=root.querySelectorAll('.irc-row');var g=window.gsap;var rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
function move(e){var r=root.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;if(g)g.to(thumb,{left:x,top:y,duration:.5,ease:'power3.out'});else{thumb.style.left=x+'px';thumb.style.top=y+'px';}}
rows.forEach(function(row){row.addEventListener('mouseenter',function(){thumb.style.setProperty('--c',row.dataset.c);if(g&&!rm)g.to(thumb,{opacity:1,scale:1,clipPath:'inset(0 0% 0 0)',duration:.45,ease:'power3.out'});else thumb.style.opacity=1;});row.addEventListener('mouseleave',function(){if(g&&!rm)g.to(thumb,{opacity:0,scale:.6,clipPath:'inset(0 100% 0 0)',duration:.3,ease:'power2.in'});else thumb.style.opacity=0;});});
root.addEventListener('mousemove',move);
}
init(document.querySelector('.jouw-container'));More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →