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

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

• التأثير 1
• التأثير 2
• التأثير 3
• التأثير 4
• التأثير 5
• التأثير 6

• التأثير 7
• التأثير 8
• التأثير 9
• التأثير 10

شرح طريقة التركيب
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;
 }

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

ملحوظة:

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

عن الكاتب : Hussam

إرشادات

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

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

أين تجدنا؟

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


كلمة الختام

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

أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم