طريقة تكبير الصور عن وضع الماوس عليها

تكبير تحوم تأثير خاص جدا لتبدو أكثر جمالا مما يجعل من الصور في Blogger. في الواقع تأثير التكبير تحوم هو التأثير الذي الأزيز صور أو لقطات عند نقل أو وضع مؤشر الماوس الخاص بك على الصور في Blogger.

انها حقا تأثير بارد. الآن دعونا نرى كيفية إضافة تأثير الصورة تحوم التكبير. تذكر انها فقط للمدون. يمكنك مشاهدة عرض لك

انتقل إلى Blogger → → التصميم تحرير HTML قم بعمل نسخة احتياطية لقالب سلامة وضع علامة الآن على "قوالب القطعة توسيع" والعثور على التعليمات البرمجية التالية باستخدام CTRL + F

]]></b:skin> 

Paste following code just it

/*URL: http://www.edutechnology.net */
.hovergallery img{
cale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:sca
-webkit-transform:
sle(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
ation: 0.5s; /*Mozilla duration version*/
-o-transition-duration:
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-du
r 0.5s; /*Opera duration version*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
opacity: 1;
}

Save your template

When you want to show zoom hover effect on pictures you have to useclass="hovergallery" this code. Let's see an example

This is a image link

<a href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>

Now you have to add class="hovergallery" this code if you want to enable this effect on pictures. See below

<a class="hovergallery"href="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s1600/Blog-Exposure-300x300.jpg"<img src="http://3.bp.blogspot.com/-8IpQF4KqkH4/T1IfrH5q99I/AAAAAAAAAMQ/y5vnM5WEM0o/s320/Blog-Exposure-300x300.jpg" /></a>

I hope you already understood. you have to insert this code class="hovergallery"manually to every image if you want to show the effect and it's very easy