আপনার ব্লগের ইমেজে হোভার ইফেক্ট লাগানো শিখে নিন সহজেই

আমি আমার এই ব্লগে এই ইমেজ ইফেক্ট ব্যবহার করছি। ইমেজে এই হোভার ইফেক্ট দিতে নিচের ধাপগুলো অনুসরণ করুন :

ধাপ ১ : আপনার ব্লগার একাউন্টে লগিন করুন।
ধাপ ২ : ড্যাশবোর্ডের টেম্পলেট সেকশন ক্লিক করুন।
ধাপ ৩ : টেম্পলেটের Customize বাটন ক্লিক করুন (কমলা রঙের বাটন)।
ধাপ ৪ :  এখন Advanced অপশন থেকে Add Css ক্লিক করুন।
ধাপ ৫ : এরপর নিচের সিএসএস কোডগুলো বসিয়ে দিয়ে Apply করুন।

.post img {
-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 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

ধাপ ৬ : ব্যাস, আপনার ব্লগে ইমেজ ইফেক্ট রেডি।

DEMO