ইমেজ হোভার প্রভাব
একটি স্ট্যাটিক ইমেজ শুধু সেখানে বসে। ইমেজ হোভার ইফেক্ট যোগ করুন এবং একই ছবি কিছু কাজ করতে শুরু করে: একটি শিরোনাম স্লাইড করে, একটি বিবরণ বিবর্ণ হয়ে যায় এবং একটি ক্লিক লোকেদের একটি লিঙ্কে পাঠায় বা একটি সম্পূর্ণ পপআপ খোলে। এলিমেন্টরের জন্য ইমেজ হোভার ইফেক্ট উইজেট 30+ হোভার অ্যানিমেশন (বিবর্ণ, জুম, স্লাইড, পুশ এবং বাকি) সহ পাঠানো হয় এবং আপনি CSS-এর একটি লাইন না লিখে সেগুলি সেট আপ করেন। এটি সেই জায়গাগুলির সাথে ফিট করে যেখানে একটি চিত্রকে একটি শিরোনাম, একটি ক্যাপশন এবং একটি অ্যাকশন বহন করতে হয়: পোর্টফোলিও, টিম গ্রিড, পরিষেবা কার্ড, পণ্য শোকেস৷।
একটি প্রভাব চয়ন করুন, ক্লিকটি কী করে তা চয়ন করুন এবং আপনার ডিজাইনের সাথে মেলে প্রতিটি স্তরকে স্টাইল করুন৷ আপনি যা দিয়ে শেষ করেন তা হল একটি ইমেজ কার্ড যা লোকেরা অতীতে স্ক্রোল করার পরিবর্তে আসলে বন্ধ করে দেয়। নীচের ভিডিওটি পুরো বিষয়টির মধ্য দিয়ে চলে, প্রতিটি অ্যানিমেশন দেখায় এবং সেটআপটি কয়েক মিনিট সময় নেয়।
ইমেজ হোভার প্রভাব কি?
একটি ইমেজ হোভার ইফেক্ট হল একটি অ্যানিমেশন যা কেউ যখন একটি ছবির উপর মাউস সরিয়ে দেয় তখন আগুন লাগে। সমতল থাকার পরিবর্তে, ছবিটি প্রতিক্রিয়া দেখায়। এটি জুম, অস্পষ্ট, রঙ পরিবর্তন বা একটি টেক্সট প্যানেলকে ভিউতে স্লাইড করতে পারে। আপনি তাদের কল দেখতে পাবেন ইমেজ রোলওভার প্রভাব অথবা ফটো হোভার ইফেক্ট, এবং তারা সবাই একই জিনিস করে: একটি প্লেইন ইমেজ নিন এবং এটিকে "এখানে আরও আছে, আমাকে ক্লিক করুন।"
আপনি কাস্টম সিএসএস দিয়ে এই সব তৈরি করতে পারেন। এর অর্থ হল ট্রানজিশন লেখা, মোবাইলে তাদের আচরণ করা এবং প্রতিবার ডিজাইন পরিবর্তন হলে কোডে ফিরে যাওয়া। মাস্টার অ্যাডনস উইজেট এলিমেন্টরের ভিতরে দৃশ্যত এটি পরিচালনা করে, তাই আপনি পাবেন সহজ ইমেজ হোভার প্রভাব কোড এডিটর না খুলেই। আপনি যদি টুলকিটের বাকি অংশ দেখতে চান, ব্রাউজ করুন মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন অথবা এলিমেন্টর অ্যানিমেশন বৈশিষ্ট্য.
30+ প্রি-বিল্ট হোভার অ্যানিমেশন
হোভারে প্রথম ইমপ্রেশন ঘটে। আপনি CSS অ্যানিমেশনের একটি লাইব্রেরি পাবেন যা আপনার শিরোনাম এবং বিবরণকে মসৃণভাবে নিয়ে আসে, তাই পাঠ্যটি স্ক্রিনে পপ করার পরিবর্তে আসে। এক ক্লিকে যেকোনো প্রভাব প্রয়োগ করুন, তারপর একটি চিত্রের সাথে মানানসই না হওয়া পর্যন্ত সম্পাদকে সেগুলির মাধ্যমে সাইকেল করুন। আমি সাধারণত স্থির হওয়ার আগে তিন বা চারটি চেষ্টা করি, যেহেতু একটি বিস্তৃত ল্যান্ডস্কেপ শটে দুর্দান্ত দেখায় এমন একটি প্রভাব একটি টাইট পোর্ট্রেট ক্রপ থেকে অনুভব করতে পারে।
- ফেইড এবং জুম: টেক্সট ফেইড ইন করার সময় ইমেজ ফেইড বা স্কেল আপ হয়।
- স্লাইড (উপর, নিচে, বাম, ডান): একটি ক্যাপশন প্যানেল যেকোনো প্রান্ত থেকে স্লাইড করে।
- ধাক্কা দিন এবং প্রকাশ করুন: শিরোনাম এবং বর্ণনার জন্য জায়গা তৈরি করতে চিত্রটি স্থানান্তরিত হয়।
- ফ্লোট এবং চকচকে: একটি ছোট লিফট এবং ইমেজ জুড়ে একটি হালকা ঝাড়ু।
- বেছে নেওয়ার জন্য প্রচুর: এক প্রান্তে শান্ত বিবর্ণ, অন্য প্রান্তে সাহসী দিকনির্দেশক স্লাইড।
- CSS এ চলে: গতি মসৃণ থাকে কারণ এটি ভারী স্ক্রিপ্টের উপর ঝুঁকে পড়ে না।
- পরীক্ষা করার জন্য দ্রুত: সম্পাদকে প্রভাব অদলবদল করুন এবং এখনই পরিবর্তনটি দেখুন।
ক্লিকে স্মার্ট লিঙ্কিং এবং পপআপ সামগ্রী
কেউ কার্ডে ক্লিক করলে কী হবে তা আপনি ঠিক করেন। এটিকে একটি স্ট্যান্ডার্ড লিঙ্ক সহ যেকোনো URL-এ নির্দেশ করুন, অথবা অ্যাকশনটিকে পপআপে স্যুইচ করুন এবং লোকেদের পৃষ্ঠায় রাখুন৷ পপআপটি পাঠ্যের মধ্যেও সীমাবদ্ধ নয়: বিষয়বস্তুর প্রকার সেট করুন৷ সংরক্ষিত বিভাগ এবং এটি আপনার ইতিমধ্যে তৈরি করা যেকোনো এলিমেন্টর টেমপ্লেটে টানছে। এটি একটি ইমেজ কার্ডকে একটি সম্পূর্ণ বায়ো, একটি পণ্যের বিশেষ শীট বা একটি যোগাযোগ ফর্মের দরজায় পরিণত করে এবং দর্শক কখনই পৃষ্ঠাটি ছেড়ে যায় না।
- দুটি ক্লিক কর্ম: একটি লিঙ্ক দিয়ে ট্র্যাফিক পাঠান, বা পপআপ দিয়ে লোকেদের সাইটে রাখুন৷।
- পপআপে আসল টেমপ্লেট: প্লেইন টেক্সট ব্যবহার করুন, অথবা আপনার লাইব্রেরি থেকে একটি সম্পূর্ণ লেআউট ড্রপ করুন।
- টিজ, তারপর বলুন: ছবিটি হুক এবং পপআপ বিস্তারিত বহন করে।
সম্পূর্ণ বিষয়বস্তু এবং শৈলী নিয়ন্ত্রণ
কার্ডটি বিস্তারিতভাবে কীভাবে দেখায় তা আপনি নিয়ন্ত্রণ করেন। আপনার ছবি আপলোড করুন এবং এর অস্বচ্ছতা সেট করুন এবং স্বাভাবিক এবং হোভার অবস্থার জন্য আলাদাভাবে ফিল্টার করুন। একটি শিরোনাম যোগ করুন (সঠিক HTML ট্যাগটি বেছে নিন যাতে এটি আপনার পৃষ্ঠার গঠনে সহায়তা করে) এবং একটি বিবরণ, তারপর প্রতিটি অংশকে নিজস্ব রঙ, প্রকার, ছায়া এবং ব্যবধান দিয়ে স্টাইল করুন।
- পৃথক শিরোনাম এবং বিবরণ: প্রতিটি শৈলী যাতে অনুক্রম স্পষ্টভাবে পড়ে।
- ইমেজ ফিল্টার: হোভারে গ্রেস্কেল থেকে রঙের কৌশলটি এখনও ভাল দেখাচ্ছে এবং এটি এখানে এক-সেটিং পরিবর্তন।
- কার্ড ফ্রেম: পটভূমি, সীমানা, বৃত্তাকার কোণ, প্যাডিং এবং বক্স ছায়া, তাই এটি আপনার লেআউটে ঠিক বসে।
এলিমেন্টরে ইমেজ হোভার ইফেক্ট কিভাবে যোগ করবেন?
আপনি দুই মিনিটের মধ্যে একটি ওয়ার্কিং হোভার কার্ড পেতে পারেন। কোন CSS, কোন শর্টকোড নেই।
- মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয় করুন, তারপর এলিমেন্টর দিয়ে যেকোনো পৃষ্ঠা সম্পাদনা করুন।
- এর জন্য উইজেট প্যানেল অনুসন্ধান করুন ইমেজ হোভার প্রভাব এবং আপনার লেআউটে এটি টেনে আনুন।
- আপনার ছবি আপলোড করুন এবং একটি শিরোনাম এবং বিবরণ যোগ করুন।
- হোভার ইফেক্ট ড্রপডাউন খুলুন এবং 30+ অ্যানিমেশনগুলির মধ্যে একটি বেছে নিন।
- লিঙ্ক বা পপআপে ক্লিক অ্যাকশন সেট করুন এবং পপআপ সামগ্রীর জন্য একটি সংরক্ষিত টেমপ্লেট চয়ন করুন৷।
- শিরোনাম, বিবরণ এবং ধারক স্টাইল করুন, তারপর প্রকাশ করুন।
আপনি প্রকাশ করার আগে একটি জিনিস করা মূল্যবান: একটি ফোনে কার্ডের পূর্বরূপ দেখুন। স্পর্শে হোভার বিদ্যমান নেই, তাই ট্যাপ আচরণটি অর্থপূর্ণ কিনা তা পরীক্ষা করুন (FAQ-তে আরও বেশি)। ক্রমানুসারে রাখা প্রতিটি সেটিংসের জন্য, অনুসরণ করুন ইমেজ হোভার প্রভাব ডকুমেন্টেশন.
ইমেজ উপর Hover প্রভাব কোথায় ব্যবহার করবেন?
- টিম গ্রিড: হোভারে নাম এবং ভূমিকা, তারপর ক্লিকে একটি পপআপে একটি সম্পূর্ণ বায়ো। এখানে কিভাবে একটি দলের সদস্য বিভাগ তৈরি করতে হয়.
- পোর্টফোলিও এবং গ্যালারী: প্রতিটি ছবির উপর একটি প্রকল্পের শিরোনাম এবং একটি "কেস স্টাডি দেখুন" লিঙ্ক।
- সার্ভিস কার্ড: একটি সংক্ষিপ্ত বিবরণ এবং পরিষেবা পৃষ্ঠার মাধ্যমে একটি লিঙ্ক।
- পণ্য শোকেস: পণ্যের চিত্রটি টিজ করুন, তারপর একটি পপআপে চশমা খুলুন।
- ব্লগ এবং বিভাগের টাইলস: ইমেজ-নেতৃত্বাধীন নেভিগেশন একটি হোভার ক্যাপশন।
পাঠ্য এবং ছবি একসাথে রাখার আরও উপায়ের জন্য, পড়ুন 25 এলিমেন্টর টেক্সট-ওভার-ইমেজ কৌশল, অথবা এর মত সম্পর্কিত ইমেজ উইজেট দেখুন ইমেজ হটস্পট উইজেট এবং এলিমেন্টর ইমেজ ক্যারোজেল.
ইমেজ হোভার প্রভাবের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
এই হোভার প্রভাব মোবাইল ডিভাইসে কাজ করবে?
এগুলি ডেস্কটপের জন্য তৈরি করা হয়েছে, যেখানে ঘোরাঘুরি করার জন্য একটি মাউস রয়েছে৷ একটি টাচস্ক্রিনে প্রভাবটি সাধারণত বিষয়বস্তু দেখানোর জন্য প্রথম ট্যাপে ফায়ার হয় এবং দ্বিতীয় ট্যাপ লিঙ্কটি অনুসরণ করে বা পপআপ খোলে। তাই মোবাইলে দুটি ট্যাপের পরিকল্পনা করুন এবং নিশ্চিত করুন যে পাঠ্যটি একবার দেখালে পাঠযোগ্য থাকে।
সিএসএস না লিখে আমি কীভাবে সাধারণ ইমেজ হোভার ইফেক্ট তৈরি করব?
আপনার পৃষ্ঠায় ইমেজ হোভার ইফেক্ট উইজেটটি ফেলে দিন, একটি ছবি আপলোড করুন, একটি শিরোনাম এবং বিবরণ যোগ করুন এবং ড্রপডাউন থেকে একটি অ্যানিমেশন বেছে নিন। এটাই, কোন CSS নেই। উইজেটটি পর্দার আড়ালে আপনার জন্য CSS লেখে, তাই একটি মোটামুটি জড়িত হোভার কার্ড একসাথে রাখা সহজ থাকে।
আমি কি ক্লিকে একটি পপআপে একটি দলের বায়ো বা পণ্যের বিবরণ খুলতে পারি?
হ্যাঁ। শিরোনামে নাম এবং বর্ণনার ভূমিকা রাখুন, ক্লিক অ্যাকশনটি পপআপে সেট করুন এবং বিষয়বস্তুর ধরন: সংরক্ষিত বিভাগ নির্বাচন করুন। Elementor-এ একটি টেমপ্লেট হিসাবে বায়ো তৈরি করুন এবং এটি এখানে নির্বাচন করুন। ফটোতে ক্লিক করুন এবং সেই সম্পূর্ণ লেআউটটি পপআপে খোলে।
আমি কিভাবে একটি লিঙ্ক এবং একটি পপআপ মধ্যে নির্বাচন করব?
আপনি যখন ভিজিটরকে অন্য পৃষ্ঠায় নিয়ে যেতে চান তখন একটি লিঙ্ক ব্যবহার করুন, যেমন একটি পণ্য পৃষ্ঠা বা একটি ব্লগ পোস্ট৷ একটি পপআপ ব্যবহার করুন যখন আপনি বর্তমান পৃষ্ঠাটি না রেখে আরও দেখাতে চান: চশমা, একটি সংক্ষিপ্ত জীবনী, একটি যোগাযোগ ফর্ম, বা চিত্রটির একটি বড় দৃশ্য৷।
অনেক অ্যানিমেটেড ইমেজ কার্ড কি আমার সাইটের গতি কমিয়ে দেবে?
প্রভাবগুলি CSS-এ চলে, তাই একটি পৃষ্ঠায় মুষ্টিমেয় কোন সমস্যা নেই। যা আসলে জিনিসগুলিকে ধীর করে দেয় তা হল ছবির ওজন, তাই প্রথমে আপনার ছবিগুলিকে সংকুচিত করুন। একবার আপনি এক পৃষ্ঠায় 20 বা তার বেশি কার্ড অতিক্রম করলে, অলস লোডিং চালু করুন এবং প্রথম পেইন্টটি দ্রুত থাকে।
আমি কি বিভিন্ন ছবিতে বিভিন্ন হোভার প্রভাব ব্যবহার করতে পারি?
সেটিংস একবারে একটি কার্ড কভার করে। প্রভাবগুলি মিশ্রিত করতে, প্রতিটি চিত্রের জন্য একটি পৃথক চিত্র হোভার প্রভাব উইজেট যোগ করুন এবং সেগুলি স্বাধীনভাবে সেট আপ করুন৷ এভাবেই আপনি একটি গ্যালারি পাবেন যেখানে কার্ডগুলি একইভাবে অ্যানিমেট করে না।
প্লেইন টেক্সটের উপর পপআপে একটি "সংরক্ষিত বিভাগ" এর সুবিধা কী?
একটি সংরক্ষিত বিভাগ আপনাকে পপআপের ভিতরে সম্পূর্ণ এলিমেন্টর সম্পাদক দেয়। প্লেইন টেক্সটের পরিবর্তে আপনি ছবি, বোতাম, কলাম, ভিডিও বা ফর্ম যোগ করতে পারেন, তাই পপআপটি একটি খালি টেক্সট বক্সের পরিবর্তে আপনার সাইটের বাকি অংশের মতো দেখায়।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
পোস্ট/পেজ ডুপ্লিকেটর
