افضل 10 تأثيرات Hover للصور
تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب نقطة بداية الحالي ،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
المعاينات
معاينة 1معاينة 2معاينة 3معاينة 4معاينة 5 . توجه لقالب >> تحرير
img {transition: all .5s;}
img:hover { -webkit-filter: brightness(120%); }
تحويل الصورة من لونها الطبيعي لرمادي
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;
}
تأثير تكبير الصورة
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; }
جعل اركان الصورة ملتوية
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;
}
تأثير ظهور اطار حول الصورة
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;
}
نعذر عن ذلك.
عنوان التدوينة:
افضل 10 تأثيرات Hover للصور
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي
عدد المشاهدات :
Zied Zaabi
زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب
* بإمكانك إدراج الأكواد الغير قابلة لنشر بتحويله عبر محول الأكواد
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"
محول الأكوادعبر عن تعليقكاترك بصمتك