كيفية إنشاء: عنوان الت叠加 للصورة

تعلم كيفية إنشاء عنوان الت叠加 للصورة عند وضع الماوس فوقها.

كيفية إنشاء عنوان الت叠加 للصورة

الخطوة الأولى - إضافة HTML:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">اسمي جون</div>
</div>

الخطوة الثانية - إضافة CSS:

* {حجم الصندوق: الحجم الكامل}
/* العنصر الذي يحتوي على طبقة الت叠加. قم بتعديل العرض حسب الحاجة */
.container {
  موضع: نسبي;
  عرض: 50%;
  أقصى عرض: 300px;
}
/* جعل الصورة قابلة للتوسع */
.image {
  عرض: قطعة;
  عرض: 100%;
  ارتفاع: تلقائي;
}
/* تأثير الت叠加 - موجود في أعلى العنصر و فوق الصورة */
.overlay {
  موضع: مطلق;
  أسفل: 0;
  خلفية: rgb(0, 0, 0);
  خلفية: rgba(0, 0, 0, 0.5); /* أسود شفاف */
  لون: #f1f1f1;
  عرض: 100%;
  过渡: .5s سهولة;
  الشفافية:0;
  لون: أبيض;
  حجم الخط: 20px;
  ملء: 20px;
  تساوي الصف: منتصف;
}
/* عند وضع فأرة الماوس فوق العنصر، يتم تضمين عنوان الت叠加 */
.container:hover .overlay {
  الشفافية: 1;
}

جربها بنفسك

الصفحات ذات الصلة

دليل:صور CSS

دليل:كيفية إنشاء تأثير انسيابي على الصورة