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

By : Unknown

On : 9:18 AM

In : ব্লগার

0 comments

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

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

ধাপ ১ : আপনার ব্লগার একাউন্টে লগিন করুন।
ধাপ ২ : ড্যাশবোর্ডের টেম্পলেট সেকশন ক্লিক করুন।
ধাপ ৩ : টেম্পলেটের 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);
}

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