ت
أثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب نقطة بداية الحالي ،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
أثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب نقطة بداية الحالي ،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
المعاينات
n>
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;
}
تأثير تحريك الصورة للأعلى
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;
}
تأثير الضباب 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);}
تأثير تدوير الصورة
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);}
تحويل الصورة للون البني الساطع
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);}
ليست هناك تعليقات :
إرسال تعليق
=a= =b= =c= =d= =e= =f= =g= =h= =j= =k= =l= =m= =n= =o= =p= =q= =w= =x= =y= =z=