ইমেজ জুম ইফেক্ট করুন ব্লগারে

Image Zoom Hover Effect

নিচের sam azgor লেখার উপর মাউস নিয়ে যান।

এই জিনিসের নাম Image Zoom Hover Effect বলে অনেকে। গুগলের ইমেজ সার্চে নতুন ভার্সনটায় এই রকম দেখায় অনেকটা। আমি অনেক দিন যাবৎ এই জুমিং ইফেক্ট খুজছিলাম। অন্য উপায়ও আছে কিন্তু আমার কাছে সুবিধাজনক মনে হয় নাই।

তাহলে শুরু করা যাক,

• লগ ইন করুন আপনার ব্লগার ড্যাশবোর্ডে, "Design".এ ক্লিক করুন তারপর "Edit Html" তারপর "Expand Widget Templates" ]]></b:skin> লেখাটি খুজে বের করুন। তারপর নিচের কোডটি এর ঠিক আগে পেস্ট করে দিন।

code:

/*URL: http://samazgor.blogspot.com */

.hovergallery img{

-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/

-moz-transform:scale(0.8); /*Mozilla scale version*/

-o-transform:scale(0.8); /*Opera scale version*/

-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/

-moz-transition-duration: 0.5s; /*Mozilla duration version*/

-o-transition-duration: 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;

}

• টেম্পলেট সেভ করুন।
• যখন আপনি এই জুমিং ইফেক্ট যেকোনো পোস্টের যেকোনো ছবিতে করতে চান তখন class="hovergallery" নির্দিষ্ট ছবির <div> ট্যাগে দিতে হবে।

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_WTrLJ1tyLUhlDYih1SBp11gDwdqYQLftYbLRR3dHXQCdyvGtX3vz-TheaTy1Mn1CmP7IasfipOQyjgxBTMSJ2futrXEPXTIVzqcaqgpWfyARInbPPtZ9agORxDy8lkN2mRGpKAVQoA/s1600/header+s.png" />

• অথবা আপনার ছবিতে লিঙ্ক থাকলে এইভাবে কোড দিতে পারেন

<a class="hovergallery" href="http://samazgor.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha_WTrLJ1tyLUhlDYih1SBp11gDwdqYQLftYbLRR3dHXQCdyvGtX3vz-TheaTy1Mn1CmP7IasfipOQyjgxBTMSJ2futrXEPXTIVzqcaqgpWfyARInbPPtZ9agORxDy8lkN2mRGpKAVQoA/s1600/header+s.png"/>