قم بإنشاء CSS-Only Image Reveal Effect مع حدود شفافة

في CSS ، نستخدمها متغيرات CSS اثنين, --BGC و --خافت ل لون الخلفية و ال أبعاد من .فو حاوية ، على التوالي. في المثال ، استخدمت نفس القيمة للحصول على العرض والارتفاع للحصول على مربع على شكل مربع ، وخلق متغيرات منفصلة للارتفاع والعرض إذا كنت تريد مستطيل.

نضيف أيضا الموقف: النسبية حكم ل .فو, بحيث العناصر الزائفة ، التي سنستخدمها ل كشف الصورة, يمكن ان يكون وضع تماما (انظر أدناه) ، وبالتالي مكدسة على بعضها البعض.

 .foo --bgc: # FFCC03؛ - البعد: 300 بكسل ؛ العرض: فار (- خافت) ؛ الارتفاع: فار (- خافت) ؛ لون الخلفية: var (- bgc) ؛ الموقف: نسبي  

نحن أضف فارغا يحتوى خاصية لكلا العناصر الزائفة, .فو :: قبل و .فو :: بعد, للحصول عليها المقدمة بشكل صحيح.

 .foo :: before، .foo :: after content: "؛ position: absolute؛ left: 0؛ top: 0؛ 

ال .فو عنصر ، لها اثنين من العناصر الزائفة, .فو :: قبل, .فو :: بعد, ولهم :يحوم الزائفة الطبقات احصل على انتقال خاصية ذلك سوف إضافة سهولة في الانتقال لهم لمدة 500 ميلي ثانية (نصف ثانية).

 .foo، .foo: hover، .foo :: before، .foo :: after، .foo: hover :: before، .foo: hover :: after الانتقالية: convert 500ms eas-in؛  

2. أضف الصورة

نضيف الصورة إلى .فو :: قبل شبه عنصر كصورة خلفية, و حجمه لتغطية العنصر الزائف بأكمله مع ال عرض و ارتفاع الخصائص. نحن كومة ذلك الحق تحت .فو جزء باستخدام مؤشر z: -1 قاعدة.

 .foo :: before width: 100٪؛ الارتفاع: 100 ٪ ؛ الخلفية: مركز / غطاء عنوان url (camel.png) ؛ مؤشر z: -1 ؛  

ال مركز الكلمة تتمركز الصورة, بينما ال التغطية الكلمة الرئيسية تحجيم الصورة ل تغطية العنصر بأكمله مع الحفاظ على نسبة العرض إلى الارتفاع.

على ال قطة أدناه تستطيع أن ترى ما لدينا حتى الآن (ض مؤشر تتم إزالة من .فو :: قبل بحيث يمكن رؤيته):

3. أضف خلفية السحب

لإضافة خلفية (انزلاق) أصغر خلف الصورة, سنستخدم العنصر الزائف الآخر, .فو :: بعد.

نقوم بإنشاء متغير CSS آخر, --ب, ل عرض الحدود. نحن نعطي ثلاثة حدود شفافة إلى ::بعد شبه العنصر: أعلى يمين وأسفل.

 .foo :: after --b: 20px؛ العرض: calc (100 ٪ - فار (- ب)) ؛ الارتفاع: calc (100٪ - calc (var (- b) * 2)) ؛ الحدود: فار (- ب) صلبة شفافة ؛ الحدود اليسرى: لا شيء ؛ box-shadow: inset 0 var (- dim) 0 var (- bgc)؛ مرشح: السطوع (.8) ؛ مؤشر z: -2 ؛  

ال عرض يحسب كما احسب (100 ٪ - فار - ب)) أن يعود العرض الكلي لل .فو ناقص العرض الكلي للحدود الأفقية (الحدود اليمنى فقط ، حيث لا توجد حدود يسرى).

ال ارتفاع يحسب كما calc (100٪ - calc (var (- b) * 2)) أن يعود الارتفاع الكلي لل .فو ناقص العرض الكلي لحدوده العمودية (الحدود العليا والسفلى).

مع ال مربع الظل الملكية ، ونحن أيضا إضافة الظل أقحم الأفقي من نفس الحجم .فو (الذي فار (- خافت)).

مرشح المغلق من سطوع (0.8) يغمق لون الخلفية قليلا ، وأخيرا ، و مؤشر z: -2 قاعدة يضع ::بعد العنصر الزائف تحتها ::قبل يحتوي على الصورة.

هنا ال لقطة شاشة للعرض التجريبي المقدمة حتى الآن (مع ض مؤشر تمت إزالته من كل من العناصر الزائفة بحيث يمكن رؤيتها):

4. إضافة التحول

نحن أضف ال تحول خاصية إلى عنصرين الزائفة ، لذلك عندما يحوم المستخدم أكثر .فو, كلا العناصر الزائفة انتقل أفقيا.

كما نحن وأضاف بالفعل انتقال الملكية لجميع العناصر في نهاية الخطوة 1 ، حركة الصورة وخلفيتها كلا الرسوم المتحركة.

 .foo: hover :: before، .foo: hover :: after convert: translateX (100٪)؛  

أدناه ، يمكنك رؤية التجريبي النهائي.

المكافأة: الهامش الاختياري

إذا قمت بعرض .فو بجانب العناصر الأخرى على صفحة وتريد هذه العناصر الأخرى ل ابتعد عندما تنزلق الصورة وخلفيتها ، أضف الهامش الأيمن من نفس العرض مثل .فو إلى .فو: تحوم جزء.

 .foo: hover margin-right: var (- dim)؛