عند تصفحى لبعض المدونات وعند قيامى بالوقوف بمؤشر الفأره على احدى الصور وجدت الصورة وقد زاد حجمها إلى الضعف تقريباً وحين أزحت المؤشر بعيداً عنها عادت كما كانت.
س: فضلاً أريد الكود المسئول عن هذا التأثير كى أضيفه لمدونتى ولكم جزيل الشكر
ج: بالفعل هو تأثير مفيد فى كثير من الأحيان لأنه يوفر عناء فتح الصورة فى صفحه جديده لتكبيرها وأيضاً يغنيك عن وضع الصورة بحجم كبير مما يؤدى إلى استهلاك جزء كبير من الصفحه بلا فائده,
ولإضافه ذلك التأثير اتبع الخطوات الآتيه:
1- توجه إلى "تصميم" ومنها إلى "تحرير HTML".
س: فضلاً أريد الكود المسئول عن هذا التأثير كى أضيفه لمدونتى ولكم جزيل الشكر
ج: بالفعل هو تأثير مفيد فى كثير من الأحيان لأنه يوفر عناء فتح الصورة فى صفحه جديده لتكبيرها وأيضاً يغنيك عن وضع الصورة بحجم كبير مما يؤدى إلى استهلاك جزء كبير من الصفحه بلا فائده,
ولإضافه ذلك التأثير اتبع الخطوات الآتيه:
1- توجه إلى "تصميم" ومنها إلى "تحرير HTML".
2- اضغط على "Ctrl+F" للبحث داخل الصفحة.
3- ابحث عن
]]></b:skin>
4-الصق الكود التالى "فوق" الكود السابق مباشرة
-------- ImageEfeect -----------.IE-CSS3 img{-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/-o-transition-duration: 0.5s; /*Opera Animation duration*/opacity: 0.5;margin: 0 10px 5px 0;}.IE-CSS3 img:hover{-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity: 1;}-------- End of ImageEffect ------
* تستطيع تغيير القيم الموجوده فى الكود على حسب احتياجاتك*
يتميز هذا الكود بأنه لا يؤثر على كل الصور المُدرجه فى مدونتك
أى أنك تستطيع أن تحدد أى من الصور ستأخذ هذا التأثير دون غيرها
,ولعمل هذا التأثير لإحدى الصور كل ماعليك هو وضع كود صغير "اشارة" قبل رابط الصورة وهو:
وهذه الصورة تطبيق حى على ماسبق<div class="IE-CSS3">
<img src="Image URL Goes Here" />
</div>
