10 مكتبات CSS لتحسين تأثيرات تحويم الصور

السماح للمستخدمين سهولة معرفة بوضوح أي جزء من صفحة الويب قابل للنقر هو جزء مهم من تصميم UX. كانت الطريقة القديمة ولكن الذهبية للقيام بذلك هي تغيير لون النص وتسطيره. في الوقت الحاضر ، مع CSS ، هناك الكثير من الطرق لتقديم تأثيرات التحويم ، خاصة الصور.

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

في هذه المجموعة ، هناك أكثر من 250 آثار التحويم لتلهمك. يمكنك أيضًا التقاط الرمز من المصدر.

آثار تحوم الصورة (16 الآثار)

في هذه الصفحة ستجد مجموعة لطيفة من 16 صورة تحوم مع تأثيرات التسميات التوضيحية. احصل على كود HTML و CSS لكل تأثير من خلال التمرير فوق الصور ، ثم النقر فوق إظهار الكود.

Image Caption Hover الرسوم المتحركة (4 تأثيرات)

فيما يلي 4 رسوم متحركة توضيحية رائعة يتم تشغيلها عند التمرير فوق الصورة. تم تصميم التأثيرات باستخدام انتقالات CSS3 خالصة وتحويلها ، وليس جافا سكريبت ، لزيادة التوافقية عبر المستعرض.

iHover (35 الآثار)

iHover عبارة عن مجموعة من تأثيرات التحويم المدعوم من CSS3. هناك 20 تأثيرات التحويم الدائرة و 15 تأثيرات التحويم مربع. لاستخدام التأثيرات ، ستحتاج إلى كتابة بعض علامات HTML وإدراج ملفات CSS.

تحوم الصورة (44 تأثيرات)

تحتوي هذه المكتبة على 44 مؤثرًا مصنوعة من CSS النقي. تتضمن بعض التأثيرات الخبو ، والدفع ، والشرائح ، والمفصلات ، والكشف ، والتكبير / التصغير ، والتمويه ، والتقلبات ، والطيات ، والستائر ، في اتجاهات متعددة. هناك نسخة موسعة من 216 من الآثار التي يمكن شراؤها مقابل 14 يورو.

تحوم الأفكار تأثير (30 تأثير)

تمنحك هذه الصورة التوضيحية التي تم تمريرها بواسطة Codrop ، الإلهام عند إجراء انتقالات سلسة بين الصور والتعليقات عليها. يوجد إجمالي 30 مؤثرًا على مجموعتين مع البرامج التعليمية والشفرة المصدرية.

تحوم المغلق (108 آثار)

يتيح لك Hover CSS إضافة تأثيرات التحويم إلى أي عنصر ، مثل زر أو رابط أو صورة. تشمل التأثيرات التحولات ثنائية الأبعاد ، التحولات في الخلفية ، الحدود ، انتقالات الظل والتوهج ، والمزيد. تتوفر المكتبة في CSS و Sass و LESS.

Animatism (100+ الآثار)

هناك أكثر من 100 صورة متحركة تحوم على الأزرار والتراكبات والتفاصيل والتعليقات التوضيحية والصور وأزرار الوسائط الاجتماعية. جميع الآثار مدعوم من CSS3.

تعليق توضيحي تأثير (7 تأثيرات)

هناك 7 تأثيرات مختلفة في هذه المجموعة. جميع التحولات تبدو جميلة حقا وسلسة. انتقل إلى قسم البرنامج التعليمي لمعرفة كيفية تطبيق هذه التأثيرات على مشروعك.

CSS Image Hover Effects (15 الآثار)

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

اتجاه تحوم تأثير 3D تحوم

هذا تأثير تحوم رائع للغاية سيكتشف حركة الماوس الأخيرة. سيتم فتح تعليق الصورة من أحد الاتجاهات الأربعة بناءً على موضع المؤشر الأخير.

تحوم الرسوم المتحركة

هنا رسم تحريك حدودي مستوحى من UNIQLO. عند حدث تحويم ، ستصبح حدود الصورة متحركة.

البلاط مع تحوم المتحركة

واحد لتصميمات البلاط ، يتميز هذا التكبير / التصغير البطيء والشرائح والنوافذ المنبثقة وتراكب باهتة من بين أشياء أخرى.

SVG clip-Path Hover Effect

تأثير تحوم صور للأضواء السينية رائع للغاية مدعوم من SVG كليب مسار و CSS التحولات. يعمل بشكل جيد على Chrome و Opera و Safari.