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

1
294

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

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

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

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

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

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

টিপসটি ভালো লাগলে শেয়ার করবেন, কমেন্ট করে জানাবেন, আর আমার ব্লগের সাথেই থাকবেন।

[[সময় থাকলে আমার ব্লগ ঘুরে আসুন প্লিজ। অনেক খুশি হব]]

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

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

1 মন্তব্য

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

12 + ten =