এলিমেন্টরে হোভারে কীভাবে একটি চিত্র জুম বা পরিবর্তন করবেন

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

• হোভারে একটি চিত্র পরিবর্তন করার জন্য এলিমেন্টরের কোনো একক সেটিং নেই, তাই অদলবদলটি চিত্রের পিছনে একটি ধারক পটভূমি বা একটি উইজেট দিয়ে করা হয় যা একটি দ্বিতীয় চিত্র গ্রহণ করে।
• এলিমেন্টরে হোভারে একটি ছবি পরিবর্তন করার নো-প্লাগইন উপায় হল দ্বিতীয় ছবিটিকে একটি কন্টেইনার ব্যাকগ্রাউন্ড হিসেবে সেট করা এবং ইমেজ উইজেটের হোভার অপাসিটি 0 এ সেট করা।
• মাস্টার অ্যাডনস অ্যাডভান্সড ইমেজ উইজেট একটি সুইচ দিয়ে ছবি অদলবদল করে, ডিসপ্লে হোভার ইমেজ, কন্টেন্ট ট্যাবের হোভার ইমেজ বিভাগে পাওয়া যায়।
• এলিমেন্টরের হোভার অ্যানিমেশন প্রিসেট গ্রো হোভারে একটি ইমেজকে 110 শতাংশে জুম করে এবং ইমেজটি তার আসল প্রান্ত অতিক্রম করে।
• একটি জুম অন হোভার যা এর ফ্রেমের ভিতরে থাকে তার জন্য ইমেজ উইজেটে একটি CSS ক্লাস এবং তিনটি ছোট CSS নিয়ম প্রয়োজন যা একটি লুকানো ওভারফ্লোতে ইমেজকে স্কেল করে।

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

নীচের চারটি পদ্ধতিই এলিমেন্টর 4.3-এ নির্মিত এবং পরীক্ষা করা হয়েছিল।

কোন পদ্ধতি ব্যবহার করতে হবে

এই পদ্ধতিগুলির মধ্যে দুটি চিত্রটি অদলবদল করে এবং দুটি জুম করে। প্রতিটি জোড়ার মধ্যে, একটি শুধুমাত্র এলিমেন্টর ব্যবহার করে এবং অন্যটি দ্রুত বা পরিষ্কার।

একটি ধারক পটভূমি সহ হোভারে একটি চিত্র পরিবর্তন করুন

এই পদ্ধতিতে কোন প্লাগইন প্রয়োজন নেই। দ্বিতীয় চিত্রটি একটি পাত্রের পটভূমি, এবং প্রথম চিত্রটি একটি সাধারণ চিত্র উইজেট হিসাবে এটির উপরে বসে। হোভারে, উপরের চিত্রটি বিবর্ণ হয়ে যায় এবং পটভূমিটি দেখায়।

1. একটি ধারক যোগ করুন এবং এর প্যাডিং 0 এ সেট করুন।
2. পাত্রে শৈলী ট্যাব, খুলুন পটভূমি, ক্লাসিক চয়ন করুন এবং হোভারে প্রদর্শিত ছবিটি আপলোড করুন। কেন্দ্র কেন্দ্রে অবস্থান এবং কভার করার জন্য আকার সেট করুন।
3. একটি টানুন ছবি পাত্রে উইজেট করুন এবং প্রথমে দেখানো উচিত এমন চিত্রটি চয়ন করুন।
4. ইমেজ উইজেট নির্বাচন করুন, খুলুন শৈলী এবং সুইচ ঘোরাঘুরি করা ট্যাব।
5. সেট অস্বচ্ছতা 0 এবং স্থানান্তরের সময়কাল প্রায় 0.4 থেকে।

একই অনুপাত সহ দুটি ছবি ব্যবহার করুন। ধারকটি চিত্র উইজেট থেকে তার উচ্চতা নেয়, তাই একটি ভিন্ন আকৃতির একটি পটভূমি ক্রপ করা হয়।

একটি হোভার ইমেজ উইজেট দিয়ে হোভারে একটি ছবি পরিবর্তন করুন

একটি হোভার ইমেজ ফিল্ড সহ একটি উইজেট একটি প্যানেল থেকে একই অদলবদল করে। নীচের ধাপগুলি ব্যবহার করুন উন্নত চিত্র উইজেট মাস্টার অ্যাডনস থেকে।

1. এর জন্য উইজেট প্যানেল অনুসন্ধান করুন উন্নত চিত্র এবং পৃষ্ঠায় টেনে আনুন।
2. মধ্যে ছবি বিভাগ, প্রধান চিত্র নির্বাচন করুন।
3. খোলা হোভার ইমেজ বিভাগ এবং চালু করুন হোভার ইমেজ প্রদর্শন করুন.
4. প্রদর্শিত ক্ষেত্রের দ্বিতীয় চিত্রটি চয়ন করুন।
5. পৃষ্ঠার পূর্বরূপ দেখুন এবং হোভার করুন।

উইজেটে একটি ফিতা, একটি লিঙ্ক এবং একটি লাইটবক্সও রয়েছে, যা পণ্যের ফটোগুলির জন্য উপযুক্ত: প্রথমে সামনের দৃশ্য, হোভারে পিছনের দৃশ্য, কোণে একটি নতুন ফিতা সহ৷।

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

গ্রো প্রিসেট দিয়ে হোভারে একটি ছবি জুম করুন

দ্রুততম জুম একটি প্রিসেট। ইমেজ উইজেট নির্বাচন করুন, খুলুন শৈলী, সুইচ ঘোরাঘুরি করা ট্যাব এবং সেট হোভার অ্যানিমেশন প্রতি বৃদ্ধি। পয়েন্টারটি শেষ হওয়ার সময় চিত্রটি 110 শতাংশে স্কেল করে।

গ্রো এর চারপাশে স্থান সহ একটি একক চিত্রের জন্য ভাল কাজ করে। একটি টাইট গ্রিডে এটি পাশের ছবিগুলিকে ওভারল্যাপ করে, তাই সেখানে পরবর্তী পদ্ধতিটি ব্যবহার করুন৷।

এর ফ্রেমের ভিতরে হোভারে একটি ছবি জুম করুন

একটি জুমের জন্য যা ছবির নিজস্ব বাক্সের ভিতরে থাকে, ইমেজ উইজেটকে একটি CSS ক্লাস দিন এবং তিনটি নিয়ম যোগ করুন। উইজেটটি তার আকার রাখে এবং চিত্রটি এর ভিতরে স্কেল করে।

1. ইমেজ উইজেট নির্বাচন করুন এবং খুলুন উন্নত. ভিতরে সিএসএস ক্লাস, প্রকার hover-zoom.
2. আপনার সাইটে নীচের CSS যোগ করুন।

.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); }

CSS কোথায় যায় তা আপনার সেটআপের উপর নির্ভর করে। Elementor Pro এর অ্যাডভান্সড ট্যাবে একটি কাস্টম CSS বক্স রয়েছে। এটি ছাড়া, ওয়ার্ডপ্রেসে উপস্থিতি, কাস্টমাইজ, অতিরিক্ত CSS ব্যবহার করুন, বা কাস্টম CSS এক্সটেনশন মাস্টার অ্যাডঅনগুলিতে। একটি শক্তিশালী জুমের জন্য 1.08 থেকে 1.15 পরিবর্তন করুন।

চারটি জিনিস যা ভুল হয়ে যায়

এই প্রভাবগুলির সাথে বেশিরভাগ সমস্যা চিত্রের আকার এবং ভুল ডিভাইসে পরীক্ষা থেকে আসে।

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

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

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

এলিমেন্টরে হোভারে একটি চিত্র পরিবর্তন করতে, একটি বিবর্ণ চিত্র উইজেট সহ একটি ধারক পটভূমি বা হোভার চিত্র ক্ষেত্র সহ একটি উইজেট ব্যবহার করুন৷ জুম করতে, দ্রুত ফলাফলের জন্য Grow ব্যবহার করুন এবং CSS ক্লাস ব্যবহার করুন যখন ছবিটি তার ফ্রেমে থাকতে হবে।

দ্য উন্নত চিত্র উইজেট একটি প্যানেলে অদলবদল পরিচালনা করে, এবং ইমেজ হোভার প্রভাব টেক্সট ওভারলে কভার করে।

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

• আগে এবং পরে জন্য Elementor ইমেজ তুলনা স্লাইডার
• ইমেজের উপর এলিমেন্টর টেক্সট
• এলিমেন্টর ইমেজ বক্স
• এলিমেন্টরে ইমেজ হোভার ইফেক্ট কিভাবে যোগ করবেন (3 উপায়)
• এলিমেন্টরের জন্য 30 ইমেজ হোভার ইফেক্ট