CSS Hover Overlays

एक hover overlay एक caption, icon, या tinted layer है जो cursor आने तक किसी image के ऊपर invisibly बैठा रहता है, फिर view में fade या slide हो जाता है — photo galleries और product grids में एक common pattern।

In this page:

Overlay Structure
Hover पर Overlay दिखाना
Overlays पर Text Captions
Icon Reveal Overlays
Sliding बनाम Fading Overlays

Syntax

css

.container {
  position: relative;
}
.overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity duration;
}
.container:hover .overlay {
  opacity: 1;
}

Overlay Structure

एक hover overlay आमतौर पर एक positioned wrapper (position: relative) से बना होता है जिसमें image plus एक दूसरा element (position: absolute, वही size) सीधे उसके ऊपर बैठा होता है, initially opacity: 0 या एक ऐसे transform से hidden जो उसे view से बाहर धकेल देता है।

Note:

Accepted values:
position: absolute — overlay को container पर layer करता है
inset: 0 — इसे पूरे box में फैलाता है
background: rgba(...) — semi-transparent color
opacity: 0 — hover तक hidden

उदाहरण: The Overlay Structure

css

<style>
.wrap {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  opacity: 0;
}
.wrap:hover .overlay {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Base">
  <div class="overlay">Overlay layer, hidden by default</div>
</div>

Hover पर Overlay दिखाना

overlay की visible state overlay पर नहीं बल्कि wrapper पर एक :hover selector से trigger होती है, ताकि image पर कहीं भी hover करना (सिर्फ exact overlay area नहीं) इसे reveal करे — एक transition के साथ combined ताकि smooth fade या slide हो।

Note:

Accepted values:
opacity: 0 से 1 — fade in
visibility: hidden से visible — visibility toggle करता है
transition: opacity 0.3s — smooth reveal
:hover — trigger state

उदाहरण: Revealing the Overlay on Hover

css

<style>
.wrap {
  position: relative;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .overlay {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Base">
  <div class="overlay">Revealed by hovering the wrapper</div>
</div>

Overlays पर Text Captions

overlay element के अंदर एक caption रखना उसे एक semi-transparent background tint के साथ fade in होने देता है, photo galleries के लिए एक common pattern जहाँ caption default view को cluttered किए बिना image का नाम बताता है।

Note:

Accepted values:
display: flex — caption को layout करता है
align-items: center — vertical centering
justify-content: center — horizontal centering
text-align: center — text lines को center करता है

उदाहरण: Text Captions on Overlays

css

<style>
.wrap {
  position: relative;
}
.caption {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .caption {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Photo">
  <div class="caption">Photo Title</div>
</div>

Icon Reveal Overlays

पूरी opacity वाले text के बजाय, कुछ overlays image पर centered सिर्फ एक छोटा icon (जैसे एक magnifying glass या एक play button) reveal करते हैं, अक्सर नीचे की image पर एक हल्के zoom या darken effect के साथ combined।

Note:

Accepted values:
opacity: 0 से 1 — fade in
visibility: hidden से visible — visibility toggle करता है
transition: opacity 0.3s — smooth reveal
:hover — trigger state

उदाहरण: Icon Reveal Overlays

css

<style>
.wrap {
  position: relative;
}
.icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .icon {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Photo">
  <span class="icon">🔍</span>
</div>

Sliding बनाम Fading Overlays

एक overlay या तो opacity के ज़रिए fade in हो सकता है या एक transform: translateY() के ज़रिए slide in हो सकता है जो इसे box के बाहर से जगह पर move करता है — sliding ज़्यादा directional महसूस होता है और bottom edge से उठने वाले caption bars के लिए common है।

Note:

Accepted values:
transform: translateY(100%) — नीचे से शुरू होता है
transform: translateY(0) — जगह पर slide होता है
opacity: 0 से 1 — slide के बजाय fade होता है
overflow: hidden — sliding overlay को clip करता है

उदाहरण: Sliding vs Fading Overlays

css

<style>
.wrap {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.fade {
  background: lightblue;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.slide {
  background: lightgreen;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.wrap:hover .fade {
  opacity: 1;
}
.wrap:hover .slide {
  transform: translateY(0);
}
</style>
<div class="wrap">
  <div class="fade">Fades in</div>
  <div class="slide">Slides up from below</div>
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Effects Next Lesson → CSS Image Modal

CSS Hover Overlays

Overlay Structure

Hover पर Overlay दिखाना

Overlays पर Text Captions

Icon Reveal Overlays

Sliding बनाम Fading Overlays

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code