آخر الأخبار

أندرويد

بيتكوين

تقنية

loading...

الخميس، 26 يناير، 2017

إضافة تأثير Hover لصور المواضيع



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

شرح طريقة التركيب
1. توجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع الكود التالي فوقه


الشكل الأول
.post-body img { 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"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */; } 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"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover { filter: none; -webkit-filter: grayscale(0%); } filter: none; -webkit-filter: grayscale(0%);}
الشكل الثاني
.post-body img { border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; } border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out;}.post-body img:hover { margin-top: 2px; } margin-top: 2px;} 

ليست هناك تعليقات:

إرسال تعليق

جميع الحقوق محفوظة لـإعلم وتعلم
تعريب وتطوير ( كن مدون ) Designed By