افضل 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;
 }