Overlayها در CSS افکت‌هایی بصری هستند که لایه‌ای نیمه‌شفاف را روی محتوای اصلی اضافه می‌کنند. این تکنیک‌ها معمولاً به منظور بهبود طراحی، افزایش خوانایی یا ارتقاء تعامل کاربر به کار می‌روند. در مورد تصاویر، overlay در CSS می‌تواند باعث واضح‌تر دیده شدن متن روی تصویر، برجسته کردن بخش‌هایی از تصویر یا اعمال افکت‌هایی مثل hover شود.

در این مقاله، ابتدا بررسی می‌کنیم که overlay در CSS چیست و چگونه می‌توان با استفاده از روش‌های پایه‌ای، آن را روی تصاویر پیاده‌سازی کرد. سپس به تکنیک‌های پیشرفته‌تری مانند افکت‌های hover و انیمیشن‌ها می‌پردازیم.

چگونه یک افکت Overlay در CSS ایجاد کنیم؟

یکی از رایج‌ترین روش‌ها برای ایجاد افکت Overlay در CSS، استفاده از pseudo-elementها (مانند

::before یا ::after) یا افزودن یک تگ <div> اضافی به عنوان لایه جداگانه است.

در ادامه هر دو روش را بررسی می‌کنیم.

ایجاد Overlay با استفاده از pseudo-element

::before

::before

برای ایجاد یک Overlay با استفاده از

::before، ابتدا باید تصویر را داخل یک کانتینر قرار دهیم. به عنوان مثال:

<div class="image-wrapper">
  <img
    src="https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=800&h=600&auto=format&fit=crop"
    alt="Sample Image"
    width="800"
    height="600"
  />
  <div class="overlay-text">
    The Pros and Cons of Buying vs. Renting a Home
  </div>
</div>

در مرحله بعد، با استفاده از

::before روی کانتینر .image-wrapper، Overlay را به صورت یک لایه نیمه‌شفاف اضافه می‌کنیم. این pseudo-element به صورت absolute موقعیت‌دهی شده و یک پس‌زمینه شفاف دریافت می‌کند:

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

از آنجایی که

::before موقعیت‌دهی absolute دارد، باید روی کانتینر .image-wrapper نیز position: relative; را اعمال کنیم تا Overlay در جای مناسب قرار گیرد:

.image-wrapper {
  position: relative;
  /* Other styles */
}

با استفاده از pseudo-elementهایی مانند

::before، می‌توانیم به سادگی افکت Overlay را روی تصاویر ایجاد نماییم. رنگ و میزان شفافیت Overlay با تغییر مقادیر rgba قابل تنظیم است. خروجی مثال در این لینک قابل مشاهده می‌باشد.

چرا Overlay روی متن قرار نمی‌گیرد؟

با وجود اینکه pseudo-element

::before روی .image-wrapper اعمال شده، اما متن داخل آن همچنان قابل مشاهده است. این به این دلیل است که .overlay-text نیز به صورت absolute موقعیت‌دهی شده و در نتیجه در همان موقعیت positioning context با Overlay قرار دارد.

در ترتیب چیدمان المنت‌ها، ترتیب قرارگیری المنت‌ها در HTML اهمیت دارد. از آن‌جایی که

.overlay-text پس از ::before در ساختار DOM قرار گرفته، به صورت طبیعی در لایه‌ای بالاتر نسبت به Overlay قرار می‌گیرد و باعث می‌شود متن قابل مشاهده باقی بماند.

برای کنترل دقیق‌تر ترتیب لایه‌ها، می‌توانیم از ویژگی

z-index استفاده کنیم. مقدار بالاتر برای z-index باعث می‌شود المنت مربوطه روی سایر المنت‌ها قرار بگیرد، در حالی که مقدار کم‌تر آن را در زیر سایر لایه‌ها قرار می‌دهد.

ایجاد Overlay با استفاده از یک

<div>

<div> جداگانه

به جای استفاده از

::before، می‌توانیم یک المنت <div> جداگانه به عنوان لایه Overlay درون کانتینر .image-wrapper قرار دهیم. ساختار HTML به شکل زیر خواهد بود:

<div class="image-wrapper">
  <img
    src="https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=800&h=600&auto=format&fit=crop"
    alt="Sample Image"
    width="800"
    height="600"
  />
  <div class="overlay"></div>
  <div class="overlay-text">
    The Pros and Cons of Buying vs. Renting a Home
  </div>
</div>

در این روش، کلاس

.overlay دقیقاً مشابه با ::before استایل‌دهی می‌شود: با موقعیت‌دهی absolute و پس‌زمینه‌ای نیمه‌شفاف.

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

در این ساختار، از آن‌جایی که

.overlay-text پس از .overlay در HTML قرار دارد، به طور پیش‌فرض در لایه بالاتری نمایش داده می‌شود. با این حال، باز هم می‌توانیم با استفاده از z-index کنترل دقیق‌تری بر ترتیب لایه‌ها داشته باشیم. مشاهده خروجی این قطعه کد در این لینک امکان‌پذیر می‌باشد.

چگونه یک لایه تصویر در CSS اضافه کنیم؟

در برخی مواقع نیاز است که یک تصویر را روی تصویر دیگری قرار دهیم؛ برای مثال جهت واترمارک کردن، برندینگ، یا نمایش پیش‌نمایش‌ها و غیره. یکی از روش‌های دستیابی به این هدف، قرار دادن دو تصویر درون یک کانتینر و سپس موقعیت‌دهی absolute به تصویر لایه بالا است.

ابتدا تصاویر را به صورت زیر درون یک المنت parent قرار می‌دهیم:

<div class="image-wrapper">
  <img
    src="https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=800&h=600&auto=format&fit=crop"
    alt="Background Image"
    class="background-image"
  />
  <img
    src="https://images.unsplash.com/photo-1697229299093-c920ab53bfb1?q=80&w=800&h=600&auto=format&fit=crop"
    alt="Overlay Image"
    class="overlay-image"
  />
</div>

سپس تصویر لایه بالا را با استفاده از CSS به صورت absolute موقعیت‌دهی می‌کنیم:

/* Other styles */
.overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  border: 2px solid white;
  opacity: 0.7;
}

در این روش، امکان تنظیم موقعیت و اندازه تصویر لایه بالا متناسب با نیاز طراحی وجود دارد. خروجی در این لینک در دسترس می‌باشد.

ارتقای افکت‌های Overlay با استفاده از hover و انیمیشن

اکنون که با روش‌های ایجاد Overlay و لایه‌بندی تصاویر آشنا شدیم، در ادامه به بررسی راهکارهایی برای تعاملی‌تر کردن آن‌ها با استفاده از افکت‌های hover و انیمیشن می‌پردازیم.

یک راهکار ساده این است که هنگام قرار گرفتن ماوس روی تصویر، شفافیت (opacity) لایه Overlay را تغییر دهیم:

.overlay {
  /* Other styles */
  transition: background 0.3s ease-in-out;
}
.image-wrapper:hover .overlay {
  background: rgba(0, 0, 0, 0.6);
}

این کد باعث ایجاد یک افکت ظریف می‌شود که در آن، لایه Overlay در هنگام هاور کمی تیره‌تر می‌شود و بازخورد بصری بهتری به کاربر ارائه می‌دهد.

برای مشاهده این افکت، کافیست نشانگر ماوس را روی تصویر قرار دهیم تا نتیجه را در این لینک مشاهده نماییم.

افکت hover برای لایه‌های تصویری

یکی دیگر از تکنیک‌های رایج، استفاده از لایه‌بندی تصاویر به‌گونه‌ای است که با hover کردن روی محصول، تصویری متفاوت ظاهر شود. این روش به طور گسترده در وب‌سایت‌های فروشگاهی برای نمایش داینامیک نمونه‌های مختلف یک محصول به کار می‌رود.

برای پیاده‌سازی این افکت، دو تصویر را داخل یک کانتینر قرار می‌دهیم:

<div class="product-image">
  <img
    src="https://images.unsplash.com/photo-1676291055501-286c48bb186f?w=900&auto=format&fit=crop&q=60"
    alt="Product Front"
    class="default-image"
  />
  <img
    src="https://images.unsplash.com/photo-1676303679145-8679f5ceeb16?w=900&auto=format&fit=crop&q=60"
    alt="Product Hover"
    class="hover-image"
  />
</div>

تصویر دوم با کلاس

.hover-image به صورت absolute موقعیت‌دهی می‌شود و در حالت پیش‌فرض با opacity: 0 پنهان است:

/* Other styles */
.hover-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease, transform 2s cubic-bezier(0, 0, 0.44, 1.18);
}
.product-image:hover .hover-image {
  opacity: 1;
  transform: scale(1.12);
}
.product-image:hover .default-image {
  opacity: 0;
}

با hover کردن، تصویر دوم به آرامی ظاهر شده و اندکی بزرگ‌نمایی می‌شود، درحالی‌که تصویر اولیه به آرامی محو می‌گردد. این افکت انتقالی جذاب، برای پیش‌نمایش محصولات بسیار مناسب است. جهت مشاهده خروجی مثال می‌توانیم از این لینک اقدام کنیم.

چگونه به تصاویر پس‌زمینه Overlay اضافه کنیم؟

اضافه‌کردن یک لایه Overlay به تصویر پس‌زمینه، جلوه بصری بخش‌هایی مانند Hero و بنرها را به طور قابل توجهی ارتقاء می‌دهد. این افکت با روش‌های مختلفی قابل پیاده‌سازی است؛ از جمله استفاده از pseudo-elementها، افزودن یک

<div> اضافی، استفاده از ویژگی‌های CSS مانند background-image، background-blend-mode و mix-blend-mode، و حتی ترفندهایی با border-image.

در این بخش، دو روش ساده و پرکاربرد را بررسی می‌کنیم:

1. استفاده از pseudo-element
2. استفاده از
   linear-gradient()
   linear-gradient() در ترکیب با
   background-image
   background-image

افزودن Overlay به تصویر پس‌زمینه با استفاده از pseudo-element

مشابه روشی که پیش‌تر برای افزودن pseudo-element

::before به کانتینر <img> استفاده کردیم، می‌توانیم از همین روش برای ایجاد یک لایه Overlay روی تصویر پس‌زمینه نیز بهره‌مند شویم.

برای این منظور، ابتدا ساختار HTML را به‌شکل زیر تعریف می‌کنیم:

<section class="hero-section">
  <div class="content">
    <h1>Hero title</h1>
    <p>Hero description here</p>
  </div>
</section>

سپس در CSS، تصویر پس‌زمینه را به کلاس

.hero-section نسبت داده و از ::before برای ایجاد لایه Overlay استفاده می‌کنیم:

.hero-section {
  position: relative;
  background-image:
    url("https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=800&h=600&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  color: white;
}
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
/* Other styles */

لایه Overlay تمام بخش

.hero-section را می‌پوشاند؛ از جمله محتوای داخلی آن مثل  .content. برای اینکه متن روی Overlay باقی بماند و خوانا باشد، به .content ویژگی position: relative و z-index: 1 اختصاص می‌دهیم:

.content {
  /* ... */
  position: relative;
  z-index: 1;
}

می‌توانیم خروجی مثال را در این لینک مشاهده نماییم.

اضافه‌کردن Gradient Overlay به تصویر پس‌زمینه

با استفاده از همان ساختار HTML پیشین، می‌توانیم به‌سادگی با کمک CSS یک لایه gradient روی تصویر پس‌زمینه اعمال کنیم:

/* Other styles */
.hero-section {
  background-image: linear-gradient(rgba(0, 0, 139, 0.5), rgba(139, 0, 0, 0.5)),
    url("https://images.unsplash.com/photo-1609220136736-443140cffec6?q=80&w=800&h=600&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  color: white;
}

تابع

linear-gradient() در این مثال، یک gradient با طیف آبی تیره تا قرمز تیره (هر دو با ۵۰٪ شفافیت) روی تصویر پس‌زمینه اعمال می‌کند. این کار هم به خوانایی متن کمک می‌کند و هم جلوه زیبایی به طراحی می‌بخشد. خروجی این مثال را نیز می‌توانیم در این لینک ببینیم.

جمع‌بندی

افزودن Overlay به طراحی‌های ما نه تنها جلوه بصری را تقویت می‌کند، بلکه خوانایی و تعامل‌پذیری را نیز بهبود می‌بخشد. در این مقاله، با تکنیک‌های کلیدی از جمله استفاده از Pseudo-element

::before، gradient با linear-gradient()، و افکت‌های تعاملی مانند hover آشنا شدیم.

با تسلط بر این روش‌ها می‌توانیم Hero سکشن‌ها، بنرها، و پیش‌نمایش‌های محصولات را به شکلی حرفه‌ای و جذاب طراحی کنیم. همچنین می‌توانیم با رنگ‌ها، میزان شفافیت و انیمیشن‌ها بازی کنیم تا لایه‌ها را مطابق نیاز خود شخصی‌سازی نماییم.