hello friends আশাকরি সবায় ভালো আছেন সুস্থ আছেন । আজকের টা সিএসএস ৩ (CSS3) স্টাইল দেখাবো কি ভাবে ব্লগে ইমেজ লিঙ্ক কে Zoom করে দেখাবে । তাছাড়া আমরা ব্লগে পোস্টের সময় অনেক ছোট ইমেজ দিয়ে থাকি । এর মূলত কাজ হল ইমেজ উপর মাউস নিলে ফটো Zoom করে দেখাবে । অন্য উপায়ও আছে কিন্তু আমার কাছে এটা সুবিধাজনক মনে হয় । তাহলে চলুন দেখে নেওয়া যাক ।
কিভাবে এই ওয়েডগেট আপনার ব্লগে যুক্ত করবেন !.
- প্রথমে আপনার ব্লগার ব্লগ লগইন করুন ।
- ড্যাশবোর্ড থেকে Template → Edit HTML এ ক্লিক করুন ।
- এবার আপনার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগটি খোজ করুন ।
]]></b:skin>
- উপরের ট্যাগ খুজে পেলে তার ঠিক আগে বা উপরে নিচের সিএসএস কোড গুলো বসিয়ে দিন ।
</style><style type="text/css">
/*URL: http://tomarijonnor.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;
}
</style>
/*URL: http://tomarijonnor.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;
}
</style>
- এবার Save করুন আপনার কাজ শেষ ।
এবার ব্লগে গিয়ে যখন আপনি এই জুমিং ইফেক্ট যেকোনো পোস্টের যেকোনো ছবিতে করতে চান তখন class="hovergallery" নির্দিষ্ট ছবির <div> ট্যাগে দিতে হবে।
- নিচে ভালো করে দেখেনিন ।
<a class="hovergallery" href="http://tomarijonno.blogspot.in/"><img src="http://3.bp.blogspot.com/-ZxzuMJEqzYA/U_scPj5oY2I/AAAAAAAABv4/AfurQoX9JTc/s1600/zoom.png"/>
নোটঃ উপরে লাল রঙ্গে ঘিরা অংশ নিজের ইচ্ছা মতো লিঙ্ক দিন । আর গোলাপি রঙ্গে ঘিরা অংশ নিজের ইচ্ছা মতো ফটো দিন ।
 | সময় হলে আমার ব্লগে একটু ঘুরে আসবেন । তোমারই জন্য |
আমার এই পোস্ট আপনার ভাল বা কাজে আসলে শেয়ার করুন আপনার বন্ধুদের মধ্যে এবং কমেন্ট করতে ভুলবেন না ।কোন সমস্যা হলে অবশ্যই জানাবেন আমি হেল্প করবো । ভালো থাকবেন সুস্থ থাকবেন ধন্যবাদ ।
লেখক- আমি নলিন। আমার আজকের পোস্টে আপনাদের স্বাগতম। এখন হতে এই ব্লগে আমাকে নিয়মিত পাবেন। এখানে আমি আমার জানা কিছু টিপস আর পাওয়া কিছু অভিজ্ঞতাগুলো আপনাদের সাথে শেয়ার করব। নিয়মিত এই ব্লগে যোগদিন এবং অন্যদের বলুন এই ব্লগে যোগ দিতে ।
আমি আছিঃ ফেসবুকে
অনেক ধন্যবাদ সুন্দর পোস্টটি শেয়ার করার জন্য ।
উত্তরমুছুনধন্যবাদ।
উত্তরমুছুন