তৈরী করুন আপনার সাইটের ইমেজের জন্য Shrink হোবার এফেক্ট সাইটকে করে তুলুন আরও ডায়নামিক। (পর্ব-২)

উপরের ছবিটিতে দেখুন ডেমো হিসাবে।

আজ এমন একটি সিএসএস আপনাদের মাঝে শেয়ার করব যা দিয়ে আপনি আপনার সাইটের ছবির Shrink Effect তৈরী করতে পারবেন। যা শুরুতে দেখা যাবে 400px এবং হোভার এফেক্ট 300px এ পরিবর্তন হয়ে নতুন কিছুতে রুপ নিবে।

ধরুন আপনি আপনার সাইটের কোন ইমেজের উপর মাউসটি নিলেন এবং  সাথে সাথে ছবিটির মাঝে দেখা গেল এক সাইড হতে আরেক  সাইডে সরে যেতে আর এই এফেক্টটাকেই Shrink Effect বলছি আমি।

আশা রাখি কিছুটা হলেও বুঝাতে সক্ষম হয়েছি।

তো শুরু করা যাকঃ

প্রথমতঃ-

নিচের কোডটি আপনি আপনার সাইটের Body ট্যাগ খুজে বের করে ট্যাগটির উপরে পেস্ট করবেন।

CSS

CSS:

/*Shrink Effect Created By Cyber Prince*/

.shrink img {

  height: 400px;







  width: 400px;

 

  -webkit-transition: all 1s ease;

     -moz-transition: all 1s ease;

       -o-transition: all 1s ease;

      -ms-transition: all 1s ease;

          transition: all 1s ease;

}

 

.shrink img:hover {

  width: 300px;

  height: 300px;




}

আর নিচের কোডটি ব্যবহার করুন আপনার Html কোডের ভিতরে যেখানে আপনি ছবি দেখাতে চান সেখানে শুধু ছবির লিংকটি div ট্যাগ দিয়ে আবদ্ধ করে দিবেন আর দেখুন মজা।

যেমন ব্লগ আপডেট Thumbnail এ কোডটি যোগ করতে পারেন এতে এক নতুন এফেক্ট যুক্ত হবে আপনার সাইটে যা আপনার সাইটকে আরও ডায়নামিক করে তুলবে আপনার ভিজিটরদের কাছে।

Html Code

এইচটিএমএল কোড

আজকের মত বিদায়। আবার দেখা হবে নতুন কিছু নিয়ে নতুন কোন দিন।