افضل 10 تأثيرات Hover لصور

افضل 10 تأثيرات Hover لصور

يوجد الآن مشاهدة التعليقات : 36

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب بداية نقطة،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع التأثير المختار فوقه
* ملاحظة التأثير يطبق على جميع صور المدونة بإمكانك تطبيقه على عنصر معين بتغيير img بمعرف العنصر المختار
التأثير 1
تأثير زيادة سطوع الصورة
img {transition: all .5s;}
 img:hover { -webkit-filter: brightness(120%); }
التأثير 2
تحويل الصورة من لونها الطبيعي لرمادي
img:hover {
 filter: url("data:image/svg+xml;utf8,#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }
 img {
 filter: none;
 -webkit-filter: grayscale(0%);
 transition: all .5s;
 }
التأثير 3
تأثير تكبير الصورة
img {transition: all .5s;}
 img:hover { -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s; }
التأثير 4
جعل اركان الصورة ملتوية
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 }
 img:hover {
 border-radius: 20px;
 }
التأثير 5
تأثير ظهور اطار حول الصورة
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 margin: 20px;
 }
 img:hover {
 background: #EF4836;
 padding: 20px;
 margin: 0;
 }
التأثير 6
تأثير تحريك الصورة للأعلى
img {
 -webkit-transition: margin 0.5s ease-out;
 -moz-transition: margin 0.5s ease-out;
 -o-transition: margin 0.5s ease-out;
 transition: .5s ease-out;
 }
 img:hover {
 margin: -8px 0 8px 0;
 }
التأثير 7
تأثير الضباب Blur
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
img :hover {
 -webkit-filter: blur(3px);}
التأثير 8
تأثير تدوير الصورة
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 transform: translateZ(25px) rotate(3deg);}
التأثير 9
تحويل الصورة للون البني الساطع
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 -webkit-filter: sepia(1);}
التأثير 10
تأثير تصغير حجم الصورة
img :hover {
 height: 300px;
 width: 300px;
 margin: 50px;
 }
 img {
 height: 400px;
 width: 400px;
 margin: 0;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 36 تعليقًا:

  1. تأيثرات رائعة
    شكراً لك

    ردحذف
  2. تأثيرات رائعة طالما بحث عنها بالخصوص طريقة التركيب شكرا |o|

    ردحذف
    الردود
    1. العفو من دواعي سروري :)

      حذف
  3. أهلاً أخي الغالي، بارككَ الله على التدوينات و الإفادات
    التي تقدمها لنا كل يوم، وشكراً جزيلاً لكَ، ولكني.. لا أجيد
    اللغات كما تعلم، و لهذا كنتُ أتساءل عما إن كنتَ فاضي و إن
    كنتَ تستطيع تركيب تأثير جوانب الصورة الدائرية على مدونتي
    و إن قبلتَ بذلك فسأكون شاكراً لكَ، على أيةِ حال، يمكننا التواصل معاً
    عبر الفيس من هنا: Facebook.Com/OkanimeLeo15

    ردحذف
    الردود
    1. مرحبا سيسعدني مساعدتك في تركيبها .. سأضيفك

      حذف
  4. سبق لي معرفة هذا سابقا من الموقع الاجنبي اللي حاطها في رابط المثال
    لكن طريقة شرحك وطرحك للموضوع تحفة واصل
    فنحن نحتاجك

    ردحذف
    الردود
    1. شكرا اخي ولمرورك الطيب .

      حذف
  5. غير معرف10/18/2014

    أخي أريد طلب واحد أريد اللوجو الخاص بك بالون الأزرق :)
    الله ينورك

    ردحذف
    الردود
    1. مستحيل !! شعار خاص بالمدونة

      حذف
  6. أخي حسام ممكن كيفية إضافة إعلانين تحت التدوينات ولك جزيل الشكر

    ردحذف
    الردود
    1. نعم ستكون تدوينة خاصة بإضافة الإعلانات في الأيام القادمة

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

      حذف
  7. واصلوا رحلتكم المفيدة و الرائعة :-d
    حقا هدا افضل موقع ازوره :-bd
    افضل التدوينات و اكثرها افادة و اختصار |o|
    شكرا لكم و واصلوا
    :lv

    ردحذف
    الردود
    1. بارك الله فيك ولتشجيعك الجميل :lv

      حذف
  8. أزال المؤلف هذا التعليق.

    ردحذف
    الردود
    1. اخي التأثير الذي في القالب Lycoris يصعب تركيبه لن يتم طرحه

      حذف
  9. أخي أنا أريد موقع لرموز الويب التي تستخدمها في الازرار

    ردحذف
  10. الموقع الخاص بالأيقونات هو FontAwsome ستجد ماتبحث عنه في الرابط التالي
    http://www.ar1web.com/2014/09/blog-post_9.html

    ردحذف
  11. هل هنالك خدمة لتصميم قوالب ؟

    ردحذف
    الردود
    1. لا اخي لا يوجد . اعمل حر ..

      حذف
    2. اخي اخطأت انا اقصد هل هنالك خدمة لتصميم شعارات او لا ؟

      حذف
    3. سيتم العمل على توفير خدمة تصميم الشعارات مجانا في المستقبل القريب حاليا الوقت لا يعمل لصالحي
      اما اذا اردت شعار مدفوع فتوجد خدمات بخمسات او اتصل بنا وسنلبي المطلوب

      حذف
  12. اريد جعل اللوجو بالون الرمادي عند مروير اللإارة عليه هل لي بالطريقة في قالب Lycoris ارجو عدم ارجاعي خائب انا اتابع مدونتك كل يوم وارى فيها الاشياء التي لا توجد في المدونات الاخر فهي مختلفة جدا

    ردحذف
    الردود
    1. اترك رابط المدونة التي بها القالب لمساعدتك

      حذف
  13. اخي كيف وضعت الايكات ومعلومات الموضوع في جانب الموضوع هلا تنزل الطريقة لو سمحت

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

      حذف
  14. أريد تطبيق التأثير السابع على الصورة داخل المواضيع فقط ماذا أفعل

    ردحذف
    الردود
    1. أضف الكود التالي فوق ]]></b:skin>

      .post-body img:hover { height: 300px; width: 300px; margin: 50px; } .post-body img { height: 400px; width: 400px; margin: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; }

      حذف
    2. لا أريد تأثير التصغير أدخل على المعينة للتأثير 7

      حذف
    3. أنسخ تأثير الكود 7 وضعه بالقالب ثم غير img المتواجدة مرتين بهذا: .post-body img

      حذف
  15. أريد إضافة تأتير 3 في الصفحة الرئيسية
    http://teqnet02.blogspot.com/

    ردحذف
    الردود
    1. أضف هذا الكود:
      a img {transition: all .5s;} img a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; }

      حذف
    2. لم تنجح معي أخي

      حذف
  16. لو سمحت الطريقة شغالة وكل حاجة على كل صور المدونة إلا الصور فى الصفحة الرئيسية زى ما هيا انا ضايف قالب المحترف ممكن حل

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم