20 CSS Image Hover Effects 13 / 20

CSS Shining Light Glare Image Hover

A linear-gradient sheen sweeps across the image on hover using a translateX-driven pseudo-element, simulating a light reflection glare.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<div class="ih-13">
  <div class="ih-13__grid">
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--1"><span class="ih-13__icon">🏆</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Premium</p>
        <p class="ih-13__title">Gold Tier Membership</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">$49 / mo</p>
      </div>
    </div>
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--2"><span class="ih-13__icon">💳</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Exclusive</p>
        <p class="ih-13__title">Platinum Credit Card</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">0% APR 18mo</p>
      </div>
    </div>
    <div class="ih-13__card">
      <div class="ih-13__img ih-13__img--3"><span class="ih-13__icon">💎</span></div>
      <div class="ih-13__body">
        <p class="ih-13__tag">Diamond</p>
        <p class="ih-13__title">Crystal Pro Bundle</p>
        <p class="ih-13__stars">★★★★★</p>
        <p class="ih-13__price">$299 / yr</p>
      </div>
    </div>
  </div>
</div>
.ih-13,.ih-13 *,.ih-13 *::before,.ih-13 *::after{margin:0;padding:0;box-sizing:border-box}
.ih-13 ::selection{background:#fbbf24;color:#000}
.ih-13{
  --accent:#fbbf24;--bg:#0a0906;--text:#f1f5f9;--muted:#78716c;
  --duration:0.6s;--ease:cubic-bezier(0.4,0,0.2,1);
  font-family:system-ui,sans-serif;background:var(--bg);padding:40px 24px;
  min-height: 100vh;display:flex;align-items:center;justify-content:center;
}
.ih-13__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;width:100%}
.ih-13__card{
  position:relative;border-radius:14px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,0.06);
  transition:border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ih-13__card:hover{border-color:rgba(251,191,36,0.3);box-shadow:0 8px 40px rgba(251,191,36,0.12)}
.ih-13__img{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ih-13__img--1{background:linear-gradient(135deg,#1c1003,#451a03,#92400e,#fbbf24)}
.ih-13__img--2{background:linear-gradient(135deg,#0d0d0d,#1f1f1f,#404040,#a3a3a3)}
.ih-13__img--3{background:linear-gradient(135deg,#1a0a24,#4c1d95,#7c3aed,#c4b5fd)}
.ih-13__icon{font-size:48px;opacity:0.45;position:relative;z-index:1}

/* The glare: a rotated linear-gradient pseudo-element that slides across */
.ih-13__img::after{
  content:'';
  position:absolute;inset:-50%;
  width:40%;height:200%;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 60%
  );
  transform:translateX(-200%) skewX(-10deg);
  transition:transform var(--duration) cubic-bezier(0.4,0,0.2,1);
}
.ih-13__card:hover .ih-13__img::after{transform:translateX(300%) skewX(-10deg)}

.ih-13__body{padding:14px 16px;background:rgba(0,0,0,0.4)}
.ih-13__tag{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.ih-13__title{font-size:14px;font-weight:700;color:var(--text)}
.ih-13__price{font-size:16px;font-weight:800;color:var(--accent);margin-top:6px}
.ih-13__stars{font-size:11px;color:var(--accent);margin-top:2px;letter-spacing:-1px}

@media(prefers-reduced-motion:reduce){.ih-13__img::after,.ih-13__card{transition:none}.ih-13__img::after{display:none}}

How this works

The glare is a ::after pseudo-element with a wide linear-gradient angled at 105deg, containing transparent stops on either side of a bright white band: transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%. At rest it is positioned far to the left (transform: translateX(-200%)). On hover, it sweeps to the right (translateX(300%)) over the full transition duration, creating the impression of a light beam crossing the surface.

A skewX(-10deg) on the pseudo-element tilts the sheen slightly, matching how reflections fall at an angle rather than perfectly vertical. The parent card has overflow: hidden to clip the sweep within its bounds. Only transform is animated, keeping the effect on the compositor.

Customize

  • Widen the bright band for a softer glare: change the gradient stops from 40%, 50%, 60% to 30%, 50%, 70%.
  • Slow the sweep for a premium feel: --duration: 0.9s with ease-in-out timing reads as a slow cinematic lens flare.
  • Repeat the sweep on an infinite keyframe loop (not hover) for "always-on" product highlights on key CTA cards.
  • Increase the brightness of the glare peak to rgba(255,255,255,0.4) for dark-mode imagery where a stronger glare is more visible.
  • Add a secondary pseudo-element on ::before with a softer, wider glare at 15% opacity for a multi-layer light effect.

Watch out for

  • The pseudo-element uses position: absolute; inset: -50% to make it wide enough to sweep fully across the card — ensure the parent has overflow: hidden or the glare will leak outside the card boundary.
  • The sweep only fires once per hover (it is a transition, not an animation) — if the user re-hovers quickly, the sweep restarts cleanly from the left each time.
  • Adding a filter such as blur to the pseudo-element will cause the parent to create a new stacking context, potentially changing z-order of siblings — keep the pseudo-element filter-free.

Browser support

ChromeSafariFirefoxEdge
51+ 9+ 36+ 51+

Uses only CSS transforms and pseudo-elements — no browser prefixes required. The effect is disabled automatically for prefers-reduced-motion users.

More from 20 CSS Image Hover Effects

Glassmorphism Overlay on Image HoverCSS Glowing Neon Border Image HoverCSS Image Clip-Path Transition HoverCSS Image Split Transition HoverCSS Image Ripple Animation HoverCircular Team Profile Avatar Hover CSSCSS Masonry Gallery Zoom HoverCSS Image Icon Reveal Center HoverCSS Image Card Flip 3D Animation HoverCSS Image Tilt 3D Perspective HoverCSS Fullscreen Background Image HoverCSS Image Hover Zoom In Card
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →