কী টেকঅ্যাওয়ে
- ইমেজগুলির জন্য এলিমেন্টর হোভার ইফেক্টগুলি ইমেজ উইজেটের স্টাইল ট্যাবে, চারটি নিয়ন্ত্রণ সহ একটি হোভার ট্যাবের অধীনে থাকে: অপাসিটি, সিএসএস ফিল্টার, ট্রানজিশন সময়কাল এবং হোভার অ্যানিমেশন।
- এলিমেন্টরে একটি গ্রেস্কেল টু কালার হোভার ইফেক্টের জন্য কোনো কোডের প্রয়োজন নেই: সাধারণ ট্যাবে CSS ফিল্টারের অধীনে স্যাচুরেশন 0 এ সেট করুন এবং হোভার ট্যাবে 100 এ ফিরে যান।
- এলিমেন্টরের হোভার অ্যানিমেশন প্রিসেট, যেমন গ্রো, পুরো ইমেজটি সরান এবং গ্রো প্রিসেট একটি ইমেজকে হোভারে তার আকারের 110 শতাংশে স্কেল করে।
- এলিমেন্টরের ইমেজ উইজেট হোভারে ইমেজের উপরে একটি শিরোনাম বা বিবরণ দেখাতে পারে না, তাই টেক্সট ওভারলেগুলির জন্য একটি কন্টেইনার ওয়ার্কঅ্যারাউন্ড, কাস্টম CSS বা একটি অ্যাডন উইজেট প্রয়োজন।
- মাস্টার অ্যাডনস ইমেজ হোভার ইফেক্টস উইজেটে 30টি নামযুক্ত হোভার ইফেক্ট রয়েছে যা একটি হোভার ইফেক্ট ড্রপডাউন থেকে বেছে নেওয়া ছবির উপর একটি শিরোনাম এবং বিবরণ অ্যানিমেট করে।
আপনি তিনটি উপায়ে একটি ছবিতে Elementor hover প্রভাব যোগ করতে পারেন। ইমেজ উইজেটে হোভার স্টেটের জন্য অস্বচ্ছতা এবং CSS ফিল্টার সেটিংস রয়েছে। এটিতে হোভার অ্যানিমেশন প্রিসেটও রয়েছে যা ছবিটি সরিয়ে দেয়। একটি শিরোনাম এবং বিবরণের জন্য যা চিত্রের উপরে প্রদর্শিত হয়, আপনার এটির জন্য নির্মিত একটি উইজেট প্রয়োজন, যেমন ইমেজ হোভার প্রভাব.
এই নির্দেশিকাটি এলিমেন্টর 4.3-এ পরীক্ষিত সঠিক সেটিংস সহ প্রতিটি রুটকে কভার করে। প্রথম দুটি দিয়ে শুরু করুন যদি আপনি শুধুমাত্র ছবিটি প্রতিক্রিয়া জানাতে চান, এবং আপনি যদি ছবিতে পাঠ্য চান তবে তৃতীয়টিতে যান৷।
বিষয়বস্তুর সারণী
যেখানে হোভার সেটিংস এলিমেন্টরে আছে
একটি চিত্র উইজেট নির্বাচন করুন, খুলুন শৈলী চিত্র বিভাগের অধীনে ট্যাব এবং দেখুন। আকার নিয়ন্ত্রণের নীচে দুটি ট্যাব রয়েছে, সাধারণ এবং হোভার। হোভার ট্যাবের সবকিছু শুধুমাত্র তখনই প্রযোজ্য হয় যখন পয়েন্টারটি ছবির উপরে থাকে। Elementor তার ধারণা ব্যাখ্যা হোভার প্রভাব ভূমিকা.
| নিয়ন্ত্রণ | এটা ঘোরাঘুরি কি করে |
|---|---|
| অস্বচ্ছতা | 0 থেকে 1 পর্যন্ত ইমেজ ইন বা আউট বিবর্ণ |
| CSS ফিল্টার | অস্পষ্টতা, উজ্জ্বলতা, বৈসাদৃশ্য, স্যাচুরেশন এবং রঙ পরিবর্তন করে |
| স্থানান্তরের সময়কাল | পরিবর্তনটি কতক্ষণ সময় নেয় তা সেকেন্ডে সেট করে |
| হোভার অ্যানিমেশন | গ্রো এর মতো একটি প্রিসেট আন্দোলন খেলে |
উপায় 1: অস্বচ্ছতা এবং CSS ফিল্টার
অস্বচ্ছতা এবং CSS ফিল্টার ব্যবহার করুন যখন ছবিটি নিজেই হোভারে পরিবর্তন করা উচিত। ক্লাসিক উদাহরণ হল একটি ফটো যা কালো এবং সাদাতে বসে এবং পয়েন্টার আসার সময় রঙে পরিণত হয়।
- ইমেজ উইজেট নির্বাচন করুন এবং খুলুন শৈলী.
- উপর স্বাভাবিক ট্যাব, পাশের পেন্সিলটিতে ক্লিক করুন CSS ফিল্টার এবং টানুন স্যাচুরেশন 0 থেকে। ছবিটি ধূসর হয়ে যায়।
- সুইচ ঘোরাঘুরি করা ট্যাব, খুলুন CSS ফিল্টার আবার এবং স্যাচুরেশন 100 এ সেট করুন।
- সেট স্থানান্তরের সময়কাল প্রায় 0.4 পর্যন্ত তাই রঙ বিবর্ণ হয়ে যায়।
- ঐচ্ছিক: সামান্য উজ্জ্বল করার জন্য অপাসিটি নরমালে 0.85 এবং হোভারে 1 সেট করুন।
একই দুটি ট্যাব আপনাকে একটি অস্পষ্টতা দেয় যা পরিষ্কার করে, একটি আবছা চিত্র যা উজ্জ্বল করে, বা একটি রঙ পরিবর্তন করে। 0.3 এবং 0.5 সেকেন্ডের মধ্যে রূপান্তর রাখুন। এর চেয়ে ছোট দেখতে একটি ঝাঁকুনির মতো, এবং দীর্ঘ সময় ধীর বোধ করে।
উপায় 2: হোভার অ্যানিমেশন প্রিসেট
হোভার অ্যানিমেশন পুরো ইমেজটি সরিয়ে দেয় যখন পয়েন্টার এটির উপরে থাকে। এটি হোভার ট্যাবের নীচে একটি ড্রপডাউন, এবং এটির অন্য কোন সেটআপের প্রয়োজন নেই৷।
- ইমেজ উইজেট নির্বাচন করুন এবং খুলুন শৈলী, তারপর ঘোরাঘুরি করা ট্যাব।
- খোলা হোভার অ্যানিমেশন এবং একটি প্রিসেট বাছাই করুন। বৃদ্ধি সবচেয়ে মানুষ চান এক।
- পৃষ্ঠাটির পূর্বরূপ দেখুন এবং চিত্রের উপর পয়েন্টারটি সরান।
গ্রো ইমেজটিকে তার আসল প্রান্ত অতিক্রম করে বড় করে, যাতে এটি একটি টাইট গ্রিডে তার প্রতিবেশীদের ওভারল্যাপ করতে পারে। আপনি যদি একটি নির্দিষ্ট ফ্রেমের ভিতরে ছবিটি জুম করতে চান তবে এটি CSS এর কয়েকটি লাইন নেয়।
উপায় 3: চিত্রের উপর পাঠ্যের জন্য একটি উইজেট
একটি ডেডিকেটেড উইজেট ব্যবহার করুন যখন একটি শিরোনাম এবং বিবরণ হোভারে চিত্রের উপরে প্রদর্শিত হবে। এলিমেন্টরের ইমেজ উইজেট ছবির নিচে তার ক্যাপশন দেখায় এবং উপরে টেক্সট রাখার কোনো সেটিং নেই।
এই ধাপগুলি মাস্টার অ্যাডঅন থেকে ইমেজ হোভার ইফেক্ট উইজেট ব্যবহার করে।
- Elementor দিয়ে পৃষ্ঠাটি সম্পাদনা করুন, এর জন্য উইজেট প্যানেল অনুসন্ধান করুন ইমেজ হোভার প্রভাব এবং পৃষ্ঠায় টেনে আনুন।
- অধীন প্রভাব এবং চিত্র, ছবিটি আপলোড করুন।
- খোলা হোভার ইফেক্ট ড্রপডাউন করুন এবং 30টি প্রভাবের মধ্যে একটি বেছে নিন। লিলি, স্যাডি, রক্সি এবং বুব্বা থেকে শুরু করে তাদের নাম অনুসারে তালিকাভুক্ত করা হয়েছে।
- টাইপ করুন শিরোনাম এবং বর্ণনা তাদের নিজস্ব বিভাগে।
- সেট লিঙ্ক বা পপআপ? যদি একটি ক্লিক কোথাও যেতে হবে।
- স্টাইল ট্যাবে, ওভারলে রঙ, স্বাভাবিক এবং হোভারের জন্য চিত্রের অস্বচ্ছতা এবং প্রতিটি পাঠ্য স্তরের জন্য টাইপোগ্রাফি সেট করুন।
আপনি কিছু ইনস্টল করার আগে প্রভাব চেষ্টা করুন। দ্য ইমেজ হোভার ইফেক্ট উইজেট পেজ আটটি লাইভ কার্ড রয়েছে যা আপনি ঘোরাফেরা করতে পারেন, এছাড়াও 30টি প্রভাবের সম্পূর্ণ তালিকা রয়েছে৷।
আটটি প্রভাব একটি প্রো লাইসেন্স ছাড়াই কাজ করে এবং 22টির জন্য মাস্টার অ্যাডনস প্রো প্রয়োজন৷ প্রতিটি উইজেটে একটি ছবি থাকে, তাই হোভার কার্ডের একটি গ্রিড পাশাপাশি বেশ কয়েকটি উইজেট থাকে।
ভিডিও টিউটোরিয়াল
এই চার মিনিটের ভিডিওটি একটি খালি পৃষ্ঠা থেকে ইমেজ হোভার ইফেক্ট উইজেট সেট আপ করে।
আপনি কোন উপায় ব্যবহার করা উচিত?
হোভারে কী পরিবর্তন করা উচিত তা বেছে নিন: ছবি, এর অবস্থান বা এর উপরে পাঠ্য।
| তুমি চাও | ব্যবহার | চাহিদা |
|---|---|---|
| রঙ থেকে গ্রেস্কেল, তীক্ষ্ণ থেকে ঝাপসা, উজ্জ্বল থেকে ম্লান | হোভার ট্যাবে CSS ফিল্টার এবং অস্বচ্ছতা | এলিমেন্টর |
| ইমেজ বৃদ্ধি বা নাড়ি | হোভার অ্যানিমেশন | এলিমেন্টর |
| একটি জুম যা এর ফ্রেমের ভিতরে থাকে | একটি CSS ক্লাস এবং CSS এর কয়েকটি লাইন | Elementor এবং কোথাও CSS যোগ করতে |
| ছবির উপর একটি শিরোনাম এবং বিবরণ | ইমেজ হোভার ইফেক্ট উইজেট | মাস্টার অ্যাডনস |
| একটি দ্বিতীয় চিত্র যা প্রথমটিকে প্রতিস্থাপন করে | উন্নত চিত্র উইজেট, বা একটি ধারক পটভূমি | মাস্টার অ্যাডঅন, বা একা এলিমেন্টর |
অন্যান্য উপায়ে একত্রিত পাঠ্য এবং ছবির জন্য, দেখুন ইমেজের উপর এলিমেন্টর টেক্সট.
হোভার প্রভাব ফোনে কাজ করে?
হোভার হিসাবে নয়, কারণ একটি টাচ স্ক্রিনের সাথে হোভার করার জন্য কোনও পয়েন্টার নেই। এলিমেন্টরের স্টাইল ট্যাব ইফেক্ট ফোনে ফায়ার করে না, যা রঙ পরিবর্তনের জন্য কোন ক্ষতি করে না।
ইমেজ হোভার ইফেক্ট উইজেটের সাথে, প্রথম ট্যাপটি সাধারণত টেক্সট দেখায় এবং দ্বিতীয় ট্যাপটি লিঙ্কটি অনুসরণ করে। যদি পাঠ্যটি অপরিহার্য হয়, যেমন একটি মূল্য বা একটি নাম, এটিকে ছোট পর্দায়ও দৃশ্যমান কোথাও রাখুন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
আমি কিভাবে এলিমেন্টরের একটি ছবিতে একটি হোভার প্রভাব যোগ করব?
ইমেজ উইজেট নির্বাচন করুন, স্টাইল ট্যাব খুলুন এবং হোভার ট্যাবে স্যুইচ করুন। হোভার স্টেটের জন্য অপাসিটি বা সিএসএস ফিল্টার সেট করুন, অথবা গ্রো-এর মতো হোভার অ্যানিমেশন বেছে নিন। 0.3 থেকে 0.5 সেকেন্ডের একটি ট্রানজিশন সময়কাল যোগ করুন যাতে পরিবর্তনটি মসৃণ হয়।
Elementor একটি প্লাগইন ছাড়া ইমেজ হোভার প্রভাব আছে?
হ্যাঁ। এলিমেন্টরের ইমেজ উইজেটে অস্বচ্ছতা, CSS ফিল্টার এবং একটি হোভার অ্যানিমেশন প্রিসেটের জন্য হোভার নিয়ন্ত্রণ রয়েছে। তারা ইমেজ পরিবর্তন বা সরানো। ছবির উপর টেক্সট একটি অ্যাডন উইজেট বা কাস্টম CSS প্রয়োজন।
এলিমেন্টরে হোভারে আমি কীভাবে একটি চিত্রকে কালো এবং সাদা থেকে রঙে পরিণত করব?
ইমেজ উইজেটের স্টাইল ট্যাবে, সাধারণ ট্যাবে CSS ফিল্টার খুলুন এবং স্যাচুরেশন 0 এ সেট করুন। তারপর হোভার ট্যাবে CSS ফিল্টার খুলুন এবং স্যাচুরেশন 100 এ সেট করুন। ট্রানজিশনের সময়কাল প্রায় 0.4 সেকেন্ডে সেট করুন।
এলিমেন্টরে একটি চিত্রের উপর ঘোরাঘুরি করার সময় আমি কীভাবে পাঠ্য দেখাব?
এটির জন্য তৈরি একটি উইজেট ব্যবহার করুন। মাস্টার অ্যাডঅনগুলির সাথে, ইমেজ হোভার ইফেক্ট উইজেট যোগ করুন, ছবিটি আপলোড করুন, একটি শিরোনাম এবং বিবরণ টাইপ করুন এবং একটি হোভার প্রভাব চয়ন করুন। পয়েন্টারটি ছবির উপরে না হওয়া পর্যন্ত পাঠ্যটি লুকানো থাকে।
কেন আমার এলিমেন্টর হোভার প্রভাব কাজ করছে না?
সেটিংটি হোভার ট্যাবে আছে এবং সাধারণ ট্যাবে নয়, এবং ট্রানজিশনের সময়কাল 0-এর উপরে আছে কিনা তা পরীক্ষা করুন। একটি ফোন বা ট্যাবলেটে কোনও হোভার নেই, তাই মাউস দিয়ে পরীক্ষা করুন। আপনি যদি কাস্টম CSS ব্যবহার করেন, নিশ্চিত করুন যে উইজেটের ক্লাসের নাম কোডের সাথে মেলে।
চূড়ান্ত চিন্তা
ছবির জন্য এলিমেন্টর হোভার ইফেক্ট তিন ধরনের আসে। স্টাইল ট্যাবটি চিত্রটি দেখতে কেমন তা পরিবর্তন করে, হোভার অ্যানিমেশন এটিকে সরিয়ে দেয় এবং একটি পাঠ্য ওভারলে একটি উইজেট প্রয়োজন। অন্তর্নির্মিত নিয়ন্ত্রণগুলি দিয়ে শুরু করুন, যেহেতু সেগুলি চেষ্টা করার জন্য কিছুই খরচ হয় না৷।
আপনি যখন ছবিতে একটি শিরোনাম এবং বিবরণ চান, ইমেজ হোভার ইফেক্ট উইজেট থেকে বাছাই করার জন্য প্রস্তুত 30টি প্রভাব রয়েছে এবং মূল্য পৃষ্ঠা দেখায় কোন পরিকল্পনা তাদের সব অন্তর্ভুক্ত।
সম্পর্কিত পড়া
