CSS Image Effects

किसी hover selector को transform और transition properties के साथ जोड़ना एक static photo को कुछ ऐसा बना देता है जो किसी visitor के cursor आने पर respond करता है — zoom in होते हुए, fade होते हुए, या color shift करते हुए — बिना JavaScript की एक भी line के।

In this page:

Hover-triggered Zoom
दो Images के बीच Fade
Brightness और Filter Transitions
transform और transition को Combine करना
Animated Images की Performance

Syntax

css

img {
  filter: function(value);
  transition: filter duration;
}
img:hover {
  filter: function(newValue);
}

Hover-triggered Zoom

:hover पर transform: scale() से किसी image को थोड़ा बड़ा scale करना एक classic 'zoom in' product-photo effect बनाता है; image को overflow: hidden वाले एक container में wrap करना enlarged image को उसके box से बाहर फैलने से रोकता है।

जब किसी image को significantly scale up किया जाता है, जैसे इस तरह के zoom के दौरान, image-rendering: pixelated browser के default smooth blur के बजाय sharp, blocky pixel edges रखता है, जो pixel-art thumbnails के लिए अक्सर इस्तेमाल होने वाला एक जानबूझकर look है।

Note:

Accepted values:
transform: scale(<number>) — image को बड़ा करता है
overflow: hidden — zoom को container तक clip करता है
transition: transform 0.3s ease — zoom animate करता है
transform-origin — zoom center set करता है

उदाहरण: Hover-triggered Zoom

css

<style>
.wrap {
  overflow: hidden;
}
.wrap img {
  transition: transform 0.3s;
}
.wrap:hover img {
  transform: scale(1.2);
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Zooms on hover">
</div>

दो Images के बीच Fade

absolute positioning के साथ दो images को stack करना और hover पर एक की opacity को 0 से 1 में transition करना एक smooth crossfade effect बनाता है, जो आमतौर पर 'before/after' या normal/highlighted image states के लिए इस्तेमाल होता है।

Note:

Accepted values:
opacity: 0 — पूरी तरह transparent
opacity: 1 — पूरी तरह opaque (default)
transition: opacity 0.4s — fade animate करता है
position: absolute — दोनों images को stack करता है

उदाहरण: Fade Between Two Images

css

<style>
.stack {
  position: relative;
}
.stack img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.stack:hover .top {
  opacity: 1;
}
</style>
<div class="stack">
  <img src="https://placehold.co/200x150" alt="Base">
  <img class="top" src="https://placehold.co/200x150" alt="Fades in on hover">
</div>

Brightness और Filter Transitions

क्योंकि filter values को colors या positions की तरह ही transition किया जा सकता है, hover पर किसी image की brightness() या grayscale() amount बदलना — एक transition property के साथ combined — एक अचानक jump के बजाय एक smooth fade produce करता है।

Note:

Accepted values:
transition: filter 0.3s — filter changes animate करता है
filter: brightness(1.2) — brighter
filter: grayscale(1) — hover पर gray से color
filter: none — effect साफ़ करता है

उदाहरण: Brightness and Filter Transitions

css

<style>
img {
  filter: brightness(70%);
  transition: filter 0.3s;
}
img:hover {
  filter: brightness(100%);
}
</style>
<img src="https://placehold.co/200x150" alt="Brightens smoothly on hover">

transform और transition को Combine करना

किसी hover-triggered transform change को instantly snap करने के बजाय smoothly animate करने के लिए transition property को transform नाम देना ज़रूरी है (या all keyword इस्तेमाल करें); transition image की base state पर declare की जाती है, :hover rule पर खुद नहीं।

Note:

Accepted values:
transform: <function>() — एक या ज़्यादा transform functions
transition: transform 0.3s ease — change animate करता है
scale() | translate() | rotate() — common combos
will-change: transform — भारी animation के लिए hint

उदाहरण: Combining transform and transition

css

<style>
img {
  transition: transform 0.3s;
}
img:hover {
  transform: scale(1.1);
}
</style>
<img src="https://placehold.co/200x150" alt="Transition declared on the base state">

Animated Images की Performance

transform और opacity को animate करना browser के लिए comparatively सस्ता है क्योंकि वे बिना page layout recalculation को force किए GPU पर चल सकते हैं, यही वजह है कि hover effects width, height, या margin को सीधे animate करने के बजाय इन दो properties को prefer करते हैं।

Note:

Accepted values:
transform — compositor-friendly
opacity — compositor-friendly
filter — अक्सर GPU-accelerated लेकिन बड़ी images पर costly
width / height / top / left — layout trigger करते हैं, animate करने से बचें

उदाहरण: Performance of Animated Images

css

<style>
img {
  transition: transform 0.3s, opacity 0.3s;
}
img:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
</style>
<img src="https://placehold.co/200x150" alt="Animates transform and opacity, both GPU-cheap">

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Styling Next Lesson → CSS Hover Overlays

CSS Image Effects

Hover-triggered Zoom

दो Images के बीच Fade

Brightness और Filter Transitions

transform और transition को Combine करना

Animated Images की Performance

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code