Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

 
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

ت
أثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة
إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في
هذا الرابط
وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما
سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم
التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم  وبعضها مطبق على قالب نقطة بداية الحالي ،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
المعاينات
شرح طريقة التركيب 
1 . توجه لقالب >> تحرير 
2. ابحث بإستعمال CTRL+F عن :  ]]></b:skin>
3. ضع التأثير المختار فوقه 
* ملاحظة التأثير يطبق على جميع صور المدونة بإمكانك تطبيقه على عنصر معين بتغيير img بالوسم أو العنصر المختار
تأثير زيادة سطوع الصورة
img {transition: all .5s;}
 img:hover { -webkit-filter: brightness(120%); }
تحويل الصورة من لونها الطبيعي لرمادي
img:hover {
 filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#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;
 }
تأثير تحريك الصورة للأعلى
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);}
تأثير تصغير حجم الصورة
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;
 }

إذا لم تعرف كيفية تطبيق التأثير على عنصر معين إستعمل inspecter l’élément
، أو اترك رابط مدونتك مع التوضيح للعنصر الذي تريده عليه التأتير وسأقوم
بتعريفه لك ، تحياتي .

Related Post

قائمة شخصية Profile قائمة شخصية خاصة بتصميم مبهر لعرض بروفيلك للإستعمال الشخصي ، متكونة من صورة وقائمة بتأثير ورقي سأقدم لكم الأكواد ولكم حرية الإستعمال إما أن تضاف...
إضافة صندوق إعجاب فيسبوك و جوجل بلس مخفيين... .icon-heart:before {content: "f004";color: #F5D324;}ul, li,a { font-family: Electrolize,ge_ss_threeregular; font-size: 13px; text-decoration:...
إضافة محتوى مخفي في موضوع بسم الله الرحمن الرحيم ، بداية أسبوع موفقة للجميع .. عدت لكم مع إضافة جد مفيدة ورائعة لأصحاب قوالب بلوجر أيضا لمن لديهم مواضيع بكلمات تفوق الص...
افضل 10 تأثيرات Hover لصور تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في...
Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " افضل 10 تأثيرات Hover لصور "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM