CSS কোডের মাধ্যমে পোস্টের মাঝের সব ছবিকে অটো জুম ইফেক্ট দিন

সুন্দর কিছু দেয়া মাধ্যমে ব্লগের নতুনত্ব আনা এখন আরো সহজ কারন আমি আছি আপনাদের সাথে এখন থেকে সবসময় নতুন কিছু থাকবে এই ব্লগে।আজ আরো একটা সুন্দর...

সুন্দর কিছু দেয়া মাধ্যমে ব্লগের নতুনত্ব আনা এখন আরো সহজ কারন আমি আছি আপনাদের সাথে এখন
থেকে সবসময় নতুন কিছু থাকবে এই ব্লগে।আজ আরো একটা সুন্দর কিছু।
যেকোন পোস্ট লেখার সময় এর মাঝে ছবি দেয়া লাগে আর ছবি না দিলে যেন লেখাটি মানানসই হয় না।কিন্তু এই ছবি দেখার জন্য ছবিতে ক্লিক করে এটা বড় করে দেখতে হয় কিন্তু কেন?এখন থেকে আর বড় করে দেখতে হবে না কারন কিছু কোড যোগ করলেই আপনি যে ছবির উপর মাউস রাখবেন সেই ছবিটিই অটো বড় হয়ে যাবে।সেক্ষেত্রে আপনাকে বাড়তি কস্ট করে আর ছবিটি বড় করতে হবে না।
এর জন্য সামান্য কিছু সিএসএস কোড যোগ করতে হবে।নিচে কোডটুকু দেয়া হলো।

সিএসএস কোড কোথায় যোগ করবেনঃ

• প্রথমে আপনার ব্লগের প্রবেশ করুন।
• Template থেকে Edit Template এ যান।
• এবার নিচের কোডটুকু খুজুন।

 ]]></b:skin> 

• নিচের কোডটুকু Skin ট্যাগের উপরে বসিয়ে দিন।

/* CSS image zoom effect by http://www.blogtipsnticks.com */
.post img {
height: 100%;
width: 100%;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect by http://www.blogtipsnticks.com */

• এবার সেভ করুন।

আপনার ব্লগে যান ছবির উপর মাউসটি নিন এবং দেখুন ছবিটি বড় হয় কিনা।আশা করি অবশ্যই জুম হবে।ভালো থাকবেন।