How To Add Zoom Effect To Images

• ဘေလာ့ဂါ Post မွာ ပံုေလးေတြကို Zoom effect ေလး ထည့္ျပီး Post တင္နည္းေလး ျဖစ္ပါတယ္။ css ကုဒ္ေလးေတြ မ်ားရင္ Blog site Loading အခ်ိန္ ၾကားလားလို႔ ေမး စရာ ရွိပါတယ္။ ကိုယ့္ဘေလာ့ေလးကို Loading Time မၾကာေအာင္ ေရွာင္သင့္တာက Script ပိုင္းကို ေရွာင္သင့္ပါတယ္။ Css ကုဒ္အပိုင္ေၾကာင့္ေတာ့ Blog Loading Time မၾကာပါဘူး။ ဆိုဒ္မေလးပါဘူး။ စလုပ္ၾကည့္ရေအာင္ေနာ္။
• ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို Template>>>Customize>>>Add Css ကို သြားျပီး Css ကုဒ္ထည့္ရန္ေနရာမွာ Copy ယူျပီး Paste လိုက္ပါ။

Css Code

.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

ေအာက္မွာေအးထားတာကေတာ့ Post တင္ရတြင္ Html မွာ အသံုးျပဳ ရမယ္ ကုဒ္ေတြ ျဖစ္ပါတယ္ခင္ဗ်ာ။
HTML CODE

<a class="zoomeffect" href="http://www.blogger.com/YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL" />

အားလံုးပဲ Blogger မွာ Css ကုဒ္ေလးေတြႏွင့္ အလွဆင္ ကစားျပီး ေပ်ာ္ရႊင္ၾကပါေစ။ ဆက္လိုက္မွ်ေဝပါဦးမည္။