আমাদের আগের প্রবন্ধে আমরা দেখেছি কিভাবে হোভারিং এ ইমেজ ওভারলে তৈরি করতে হয় এবং এই প্রবন্ধে আমরা চেকআউট করব কিভাবে আপনার উইবলি সাইটের জন্য সহজ ইমেজ হোভারিং ইফেক্ট তৈরি করা যায়। সিএসএস প্রোপার্টিজ ট্রান্সফর্ম, ট্রান্সফর্ম, ফিল্টারিং এবং অস্বচ্ছতা উইবলি সাইটে ইমেজের জন্য হোভারিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। আপনি হয় "এম্বেড কোড" এলিমেন্টের ভিতরে সম্পূর্ণ উইজেট কোডটি কপি / পেস্ট করতে পারেন অথবা "হেডার কোড" বিভাগের অধীনে CSS স্টাইল এবং পৃষ্ঠায় " এম্বেড কোড " এলিমেন্টের ভিতরে HTML কোড যোগ করতে পারেন।
সিএসএস ইমেজ হোভারিং এর জন্য প্রভাব
নিয়ন্ত্রণের জন্য 11 টি ভিন্ন প্রভাব রয়েছে – জুম আউট, জুম ইন, বড় করা, সঙ্কুচিত করা, স্যাচুরেট, কনট্রাস্ট, উজ্জ্বলতা, গ্রেস্কেল, ব্লার, ইনভার্ট কালার এবং অস্বচ্ছতা। প্রতিটি স্টাইলের জন্য ডেমো সহ সম্পূর্ণ CSS এবং HTML কোড নিচে দেখানো হয়েছে।
- আপনার নিজের ইমেজ ইউআরএল দিয়ে ইমেজ-ইউআরএল প্রতিস্থাপন নিশ্চিত করুন। আপনি হয়ত "সম্পদ" বিভাগের অধীনে ছবি আপলোড করতে পারেন অথবা আপনার Weebly সাইটে বিভিন্ন পৃষ্ঠা থেকে URL ব্যবহার করতে পারেন অথবা অন্য সাইটের URL ব্যবহার করতে পারেন।
- আপনি স্কেল, গ্রেস্কেল, ব্রাইটনেস, কন্ট্রাস্ট ইত্যাদির মান নিজের মান দিয়ে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, "-ওয়েবকিট-ফিল্টার: উজ্জ্বলতা (0.25);" উজ্জ্বলতা কমিয়ে 25% করবে যা আপনি "-webkit-filter: brightness (1.25)" এ পরিবর্তন করতে পারেন; উজ্জ্বলতা বাড়িয়ে 125%করতে।
- ফিল্টার প্রপার্টি ইন্টারনেট এক্সপ্লোরারে সমর্থিত নয়।
এখানে প্রতিটি ধরণের ইমেজ হভারিং ইফেক্টের জন্য একটি সম্পূর্ণ কোড রয়েছে। আপনি ছবিতে মাউস ঘুরিয়ে প্রিভিউ দেখতে পারেন।
1 হোভারিং এ জুম ইন ইমেজ
<style>
.cont1 {
overflow:hidden;
}
.cont1:hover .image1 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image1 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont1">
<img class="image1" src="Image-URL">
</div>
2 হোভারিং এ ছবিটি জুম আউট করুন
<style>
.cont2 {
overflow:hidden;
}
.cont2:hover .image2 {
-webkit-transform:scale(1);
transform:scale(1);
}
.image2 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
border-radius: 15px;
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<div class="cont2">
<img class="image2" src="Image-URL">
</div>
3 হোভারিং এ ছবির আকার বড় করুন
<style>
.image3 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image3:hover {
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
</style>
<img class="image3" src="Image-URL">
4 হোভারিং এ ছবির আকার ছোট করুন
<style>
.image4 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image4:hover {
-webkit-transform:scale(0.7);
transform:scale(0.7);
}
</style>
<img class="image4" src="Image-URL">
5 হোভারে ছবির রঙের স্যাচুরেশন পরিবর্তন করুন
<style>
.image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image5:hover {
-webkit-filter: saturate(4);
}
</style>
<img class="image5" src="Image-URL">
6 হোভারে ছবিটিকে গ্রেস্কেলে রূপান্তর করুন
<style>
.image6 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image6:hover {
-webkit-filter: grayscale(100%);
}
</style>
<img class="image6" src="Image-URL">
7 ইমেজ হোভারে কনট্রাস্ট পরিবর্তন করুন
<style>
.image7 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image7:hover {
-webkit-filter: contrast(160%);
}
</style>
<img class="image7" src="Image-URL">
8 ইমেজ হোভারে উজ্জ্বলতা পরিবর্তন করুন
<style>
.image8 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image8:hover {
-webkit-filter: brightness(0.25);
}
</style>
<img class="image8" src="Image-URL">
9 হোভারে ইমেজ ব্লার পরিবর্তন করুন
<style>
.image9 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image9:hover {
-webkit-filter: blur(5px);
}
</style>
<img class="image9" src="Image-URL">
10 হভার উপর ইমেজ রং বিপরীত
<style>
.image10 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image10:hover {
-webkit-filter: invert(100%);
}
</style>
<img class="image10" src="Image-URL">
11 হোভারে অপাসিটি কালার পরিবর্তন করুন
<style>
.image11 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.image11:hover {
opacity:0.6;
filter: alpha(opacity=60);
}
</style>
<img class="image11" src="Image-URL">
যেহেতু এই সমস্ত প্রভাবগুলি জেনেরিক CSS দিয়ে তৈরি করা হয়েছে, তাই আপনি যেকোনো HTML পৃষ্ঠায় এই কোডগুলি ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এটি একটি ওয়ার্ডপ্রেস সাইট এবং আমরা ওয়ার্ডপ্রেসে " কাস্টম এইচটিএমএল " ব্লক ব্যবহার করেছি সমস্ত সিএসএস ইমেজ ওভারলে প্রভাব প্রদর্শন করতে।