এলিমেন্টরে সিএসএস ইমেজ হোভার ইফেক্টস (5 কপি-পেস্ট স্নিপেট)

কী টেকঅ্যাওয়ে

• Elementor-এ CSS ইমেজ হোভার ইফেক্ট দুটি ধাপ নেয়: অ্যাডভান্সড, CSS ক্লাসের অধীনে ইমেজ উইজেটে একটি ক্লাসের নাম যোগ করুন, তারপর একটি CSS নিয়ম পেস্ট করুন যা সেই ক্লাসকে লক্ষ্য করে।
• এই গাইডের পাঁচটি CSS ইমেজ হোভার ইফেক্ট হল ফ্রেমের ভিতরে একটি জুম, গ্রেস্কেল থেকে রঙ, একটি ছায়া সহ একটি লিফট, একটি গাঢ় ওভারলে এবং একটি ক্যাপশন যা উপরে স্লাইড করে৷।
• Elementor Pro-এর প্রতিটি উইজেটের অ্যাডভান্সড ট্যাবে একটি কাস্টম CSS বক্স রয়েছে এবং Pro ছাড়া একই CSS চেহারা, কাস্টমাইজ, অতিরিক্ত CSS-এ যেতে পারে।
• এলিমেন্টরের ইমেজ উইজেট একটি চিত্রের ভিতরে একটি ফিগক্যাপশন হিসাবে এর ক্যাপশন প্রিন্ট করে, যা শুধুমাত্র CSS এর সাথে একটি স্লাইডিং ক্যাপশন সম্ভব করে তোলে।
• গ্রেস্কেল থেকে রঙ এবং অস্বচ্ছতা পরিবর্তনের জন্য এলিমেন্টরে কোনো CSS প্রয়োজন নেই, কারণ ইমেজ উইজেটের স্টাইল ট্যাবে ইতিমধ্যেই একটি হোভার ট্যাবে CSS ফিল্টার এবং অপাসিটি রয়েছে।

সিএসএস ইমেজ হোভার ইফেক্ট এলিমেন্টরে একইভাবে কাজ করে যেভাবে তারা যেকোনো জায়গায় কাজ করে: এলিমেন্টের একটি ক্লাস এবং এর সাথে একটি নিয়ম :hover। শুধুমাত্র এলিমেন্টর-নির্দিষ্ট অংশগুলি হল যেখানে আপনি ক্লাস টাইপ করেন এবং যেখানে আপনি CSS পেস্ট করেন। নীচে পাঁচটি প্রভাব রয়েছে যা আপনি অনুলিপি করতে পারেন, প্রতিটি এলিমেন্টর 4.3-এ স্ট্যান্ডার্ড ইমেজ উইজেট সহ পরীক্ষা করা হয়েছে।

আপনি বরং কোড স্পর্শ না করতে চান, শেষ বিভাগে নো-কোড রুট দেখায় ইমেজ হোভার ইফেক্ট উইজেট.

এলিমেন্টরে সিএসএস হোভার ইফেক্ট কীভাবে কাজ করে

নীচের প্রতিটি স্নিপেট একই প্যাটার্ন অনুসরণ করে। আপনি ইমেজ উইজেটকে একটি ক্লাস দেন এবং পয়েন্টারটি শেষ হয়ে গেলে CSS সেই উইজেটের ভিতরের ইমেজ পরিবর্তন করে।

1. Elementor এ ইমেজ উইজেট নির্বাচন করুন।
2. খোলা উন্নত ট্যাব এবং খুঁজুন সিএসএস ক্লাস.
3. একটি বিন্দু ছাড়া ক্লাসের নাম টাইপ করুন, উদাহরণস্বরূপ hover-zoom.
4. একবার আপনার সাইটে ম্যাচিং CSS যোগ করুন। সেই ক্লাসের সাথে যেকোন ইমেজ তখন প্রভাব পায়।

ক্লাসটি উইজেটের বাইরের উপাদানে অবতরণ করে এবং ছবিটি একটি img এর ভিতরে, তাই নিয়ম টার্গেট .hover-zoom img.

যেখানে CSS যোগ করতে হবে

কি ইনস্টল করা আছে তার উপর নির্ভর করে আপনার কাছে CSS পেস্ট করার জন্য চারটি জায়গা আছে।

আপনি যে ক্লাসগুলি পুনরায় ব্যবহার করার পরিকল্পনা করছেন তার জন্য, একটি সাইট-ব্যাপী জায়গা হল সেরা বাড়ি৷ দ্য কাস্টম CSS এক্সটেনশন পৃষ্ঠা ব্যাখ্যা করে কিভাবে মাস্টার অ্যাডঅন বিকল্প কাজ করে।

কপি করতে 5টি CSS ইমেজ হোভার ইফেক্ট

প্রতিটি প্রভাবের একটি ক্লাসের নাম, CSS এবং হোভারের আগে এবং চলাকালীন ফলাফলের একটি স্ক্রিনশট থাকে।

1। ফ্রেমের ভিতরে জুম করুন

ইমেজ স্কেল আপ যখন এর বাক্স একই আকার থাকে। ক্লাসের নাম: hover-zoom.

.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }

2। রঙ থেকে গ্রেস্কেল

ছবিটি কালো এবং সাদাতে বসে এবং হোভারে সম্পূর্ণ রঙে পরিণত হয়। ক্লাসের নাম: hover-color.

.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }

3। ছায়া দিয়ে তুলুন

ছবিটি কয়েক পিক্সেল উপরে চলে যায় এবং একটি নরম ছায়া লাভ করে, যেমন একটি কার্ড তোলা হচ্ছে। ক্লাসের নাম: hover-lift.

.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }

4। অন্ধকার ওভারলে

একটি অন্ধকার স্তর চিত্রের উপরে বিবর্ণ হয়ে যায়। এটি একটি ছদ্ম-উপাদান দিয়ে নির্মিত, তাই কোন অতিরিক্ত মার্কআপের প্রয়োজন নেই। ক্লাসের নাম: hover-dim.

.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }

5। ক্যাপশন যা স্লাইড আপ করে

ছবির নিজস্ব ক্যাপশন নীচের প্রান্তের নীচে লুকিয়ে থাকে এবং হোভারে স্লাইড করে। ইমেজ উইজেটে, সেট করুন ক্যাপশন কাস্টম ক্যাপশনে এবং প্রথমে টেক্সট টাইপ করুন। ক্লাসের নাম: hover-caption.

.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }

এটি ক্যাপশন থাকার উপর নির্ভর করে। একটি ক্যাপশন ছাড়া, Elementor চিত্র এবং figcaption মুদ্রণ করে না, এবং নিয়ম সরানোর কিছুই নেই।

CSS নাকি বিল্ট-ইন হোভার সেটিংস?

আপনি CSS লেখার আগে Elementor এর নিজস্ব নিয়ন্ত্রণ পরীক্ষা করুন, কারণ এই পাঁচটি প্রভাবের মধ্যে দুটি সেটিংস হিসাবে বিদ্যমান। ইমেজ উইজেটের স্টাইল ট্যাবে অপাসিটি, সিএসএস ফিল্টার এবং হোভার অ্যানিমেশন সহ একটি হোভার ট্যাব রয়েছে।

অন্তর্নির্মিত সেটিংস ধাপে ধাপে আচ্ছাদিত করা হয় এলিমেন্টরে ইমেজ হোভার ইফেক্ট কিভাবে যোগ করবেন. সাধারণ কৌশল নথিভুক্ত করা হয় :হোভার সিউডো-ক্লাসের জন্য MDN এর পৃষ্ঠা.

নো-কোড রুট

সিএসএস ছবির উপরই সাধারণ প্রভাবের জন্য উপযুক্ত। একবার আপনি একটি শিরোনাম এবং একটি বিবরণ চান যা চিত্রের উপর অ্যানিমেট করে, CSS দ্রুত বৃদ্ধি পায় এবং আপনাকে প্রতিটি ডিজাইন পরিবর্তনে এটি বজায় রাখতে হবে।

মাস্টার অ্যাডঅন-এ ইমেজ হোভার ইফেক্ট উইজেট ড্রপডাউন দিয়ে প্রতিস্থাপন করে। এটিতে 30টি প্রভাব রয়েছে, প্রতিটি চিত্রের জন্য একটি শিরোনাম এবং বিবরণ এবং রঙ এবং প্রকারের জন্য স্টাইল ট্যাব নিয়ন্ত্রণ রয়েছে।

তাদের লাইভ দেখুন। দ্য ইমেজ হোভার ইফেক্ট উইজেট পেজ ঘোরাঘুরি করার জন্য আটটি কার্ড এবং সমস্ত 30টি প্রভাবের একটি টেবিল রয়েছে।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

চূড়ান্ত চিন্তা

Elementor-এ CSS ইমেজ হোভার ইফেক্টের জন্য ইমেজ উইজেটে একটি ক্লাস এবং একটি ছোট নিয়ম প্রয়োজন। এখানে পাঁচটি জুম, রঙ, লিফট, ওভারলে এবং একটি স্লাইডিং ক্যাপশন কভার করে এবং প্রতিটি এক বা দুটি মান পরিবর্তন করে সামঞ্জস্য করা যেতে পারে।

যখন আপনি চান প্রভাব ইমেজ উপর পাঠ্য অন্তর্ভুক্ত, ইমেজ হোভার ইফেক্ট উইজেট CSS বজায় না রেখেই আপনাকে সেখানে নিয়ে যায়।

সম্পর্কিত পড়া

• এলিমেন্টর অ্যানিমেটেড বোতাম
• এলিমেন্টর স্ক্রোল প্রভাব
• এলিমেন্টরে জিএসএপি অ্যানিমেশন কীভাবে যুক্ত করবেন
• এলিমেন্টরে হোভারে কীভাবে একটি ছবি জুম বা পরিবর্তন করবেন
• এলিমেন্টরের জন্য 30 ইমেজ হোভার ইফেক্ট