انتقل إلى محتوى الدرس

CSS Image Hover Overlay صندوق معلومات الصور في لغة CSS

سوف تتعلم في هذا الدرس كيفية التحكم في الصور الموجودة بداخل صفحة الويب باستخدام عدة خواص مختلفة مثل (height , width , margin , borders , opacity ) في لغة CSS.

1 صفوف تعليمية
لغة CSS
22,733 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمكن عمل صندوق معلومات يظهر فقط عند تمرير مؤشر mouse علي الصور يمكن التحكم في ألوان هذا الصندوق وحجمة وطريقة عرضة في في لغة CSS.

CSS image hover overlay fade top

ظهور صندوق معلومات وإخفاؤه من أعلي في لغة CSS.

CSS image hover overlay fade opacity

ظهور صندوق معلومات وإخفاؤه مع الشفافية في لغة CSS.

CSS image hover overlay fade

ظهور صندوق معلومات وإخفاؤه في لغة CSS.

CSS image hover overlay right

ظهور صندوق معلومات وإخفاؤه من اليمين في لغة CSS.

CSS image hover overlay left

ظهور صندوق معلومات وإخفاؤه من اليسار في لغة CSS.

CSS image hover overlay bottom

ظهور صندوق معلومات وإخفاؤه من أسفل في لغة CSS.