কিভাবে CSS এ একটি ইমেজ হোভার ইফেক্ট তৈরি করবেন

আপনার মত পাঠকরা MUO সমর্থন করতে সাহায্য করে। আপনি যখন আমাদের সাইটে লিঙ্ক ব্যবহার করে একটি ক্রয় করেন, আমরা একটি অনুমোদিত কমিশন উপার্জন করতে পারি। আরও পড়ুন

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

আপনি আপনার ছবিতে বিভিন্ন শৈলীর অ্যানিমেশন তৈরি করতে পারেন। এর মধ্যে রয়েছে ব্যাকগ্রাউন্ড ঝাপসা বা জুম করা, টেক্সট ফেইড করা বা স্লাইড করা এবং পটভূমির রঙ পরিবর্তন করা।

---

---

কেন আমার হার্ড ড্রাইভ 100 এ চলে?

দিনের মেকইউজের ভিডিও কন্টেন্টের সাথে চালিয়ে যেতে স্ক্রোল করুন

এর জন্য এইচটিএমএল তৈরি করা

একটি তৈরি করে শুরু করুন index.html আপনার কম্পিউটারে একটি খালি ফোল্ডারের ভিতরে ফাইল, তারপর একটি টেক্সট এডিটর দিয়ে ফাইলটি খুলুন। ফাইলের ভিতরে, HTML কঙ্কাল তৈরি করুন এবং ওপেনিং বডি এবং ক্লোজিং বডি ট্যাগের ভিতরে নিম্নলিখিত মার্কআপ যোগ করুন:

 <div class="grid"> 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=1" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="zoom blur" src="https://picsum.photos/500?random=2" alt=""> 
 
    <div class="content fade"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="blur" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
 
  <div class="image-wrapper"> 
    <img class="grey" src="https://picsum.photos/500?random=3" alt=""> 
 
    <div class="content slide-left"> 
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad 
      sed at amet blanditiis ullam ipsum delectus sit recusandae vel! 
    </div> 
  </div> 
</div> 

এটি একটি গ্রিড ধারক যেখানে চারটি চিত্রের মোড়ক রয়েছে৷ সঙ্গে div উপাদান image-wrapper ক্লাস ইমেজ এবং এর সংশ্লিষ্ট পাঠ্যের জন্য একটি মোড়ক হিসাবে পরিবেশন করে। প্রতিটি বিভাগের ইমেজ এবং বিষয়বস্তু একটি অনন্য ক্লাস যোগ করা আছে.

স্টাইল শীটের ভিতরে, আপনি করবেন এই উপাদানগুলিকে তাদের শ্রেণীর নাম দ্বারা লক্ষ্য করুন এবং বিভিন্ন স্টাইলিং এবং অ্যানিমেশন প্রভাব প্রয়োগ করুন। পাঠ্যটি ডিফল্টরূপে দেখাবে না; আপনি যখন ইমেজ র‍্যাপারের উপর ঘোরাবেন তখনই আপনি এটি দেখাবেন এবং এই প্রক্রিয়ায় ছবিটি বিভিন্ন প্রভাবের মধ্য দিয়ে যাবে।

মৌলিক CSS যোগ করা হচ্ছে

এখন আপনি এইচটিএমএল তৈরি করেছেন, এটি সিএসএস দিয়ে স্টাইল করার সময়। একটা তৈরি কর style.css ফাইল এবং আপনার HTML ফাইল থেকে এই স্টাইল শীট লিঙ্ক, ভিতরে <মাথা> অধ্যায়:

 <link rel="stylesheet" href="style.css">

আপনার ভিতরে style.css ফাইল, আপনাকে প্রথমে যা করতে হবে তা হল শরীরের মার্জিন শূন্যে রিসেট করা এবং নীচের কিছু মার্জিন সেট করা:

---

---

 body { 
  margin: 0; 
  margin-bottom: 20rem; 
}

এর পরে, আপনাকে সবচেয়ে বাইরের পাত্রটিকে একটিতে পরিণত করতে হবে CSS গ্রিড যা আপনি দুটি মাত্রায় উপাদানগুলিকে সাজাতে ব্যবহার করতে পারেন . নিচের কোডটি ফিট করে এমন অনেক কলাম বা সারি দিয়ে একটি গ্রিড তৈরি করে। প্রতিটি কলামের সর্বনিম্ন আকার হল 300px এবং সর্বাধিক আকার হল ধারকটির 1 ভগ্নাংশ:

 .grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
}

যেহেতু আপনি পাঠ্যটিকে এর ধারকটির সাথে সম্পর্কিত করতে চান, তাই আপনাকে চিত্রের মোড়কের সাথে সম্পর্কিত অবস্থান সেট করতে হবে:

---

---

 .image-wrapper { 
  position: relative; 
  overflow: hidden; 
} 

পরবর্তী ধাপ হল ইমেজ স্টাইল করা। চিত্রটিকে একটি ব্লক উপাদান হিসাবে প্রদর্শন করুন, এটিকে পুরো ধারকটির প্রস্থে বিস্তৃত করুন এবং এটিকে এর ধারকটির কেন্দ্রে স্থাপন করুন:

 .image-wrapper > img { 
  display: block; 
  width: 100%; 
  aspect-ratio: 1 / 1; 
  object-fit: cover; 
  object-position: center; 
} 

পাঠ্যের জন্য, এটিকে কেন্দ্রে রাখুন এবং একটি স্বচ্ছ, হালকা ধূসর পটভূমির রঙ দিন:

 .image-wrapper > .content { 
  position: absolute; 
  inset: 0; 
  font-size: 2rem; 
  padding: 1rem; 
  background: rgba(255, 255, 255, .4); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
} 

CSS ফাইলটি সংরক্ষণ করুন এবং খুলুন index.html আপনার ব্রাউজারে। আপনি নীচের ছবির মত একটি পৃষ্ঠা খুঁজে পাওয়া উচিত.

ট্রানজিশন অন এবং টেক্সট সেট করা

এখন যেহেতু আপনি চিত্রগুলিতে মৌলিক শৈলীগুলি প্রয়োগ করেছেন, পরবর্তী পদক্ষেপটি হল সেগুলিতে কিছু অ্যানিমেশন যুক্ত করা। উভয় ইমেজ এবং তাদের সংশ্লিষ্ট পাঠ্যে একটি রূপান্তর যোগ করে শুরু করুন:

 .image-wrapper > img, 
.image-wrapper > .content { 
  transition: 200ms ease-in-out; 
} 

এর মানে হল যে সমস্ত রূপান্তর প্রভাব (যেমন ফেইড-ইন, জুম এবং ব্লার) 200 মিলিসেকেন্ড স্থায়ী হবে এবং একই সময় বক্ররেখা থাকবে।

অ্যান্ড্রয়েডে নতুন ইমোজি কীভাবে পাবেন

ফেইড-ইন এবং ব্লার অ্যানিমেশন

প্রথম অ্যানিমেশন শৈলী পাঠ্য মধ্যে বিবর্ণ হয়. আপনি যখন একটি নির্দিষ্ট ইমেজ র‍্যাপারের উপর হোভার করেন, তখন যে সামগ্রীটি থাকে বিবর্ণ ক্লাসে এই প্রভাব (ফেড-ইন এবং ফেড-আউট অ্যানিমেশন) প্রয়োগ করা হবে। আপনি অস্বচ্ছতাকে শূন্যে সেট করে এবং একটি নির্দিষ্ট চিত্রের মোড়কে যখন একটি মাউস ঘোরায় তখন এটিকে পরিবর্তন করে এটি অর্জন করুন:

 .image-wrapper > .content.fade { 
  opacity: 0; 
} 
 
.image-wrapper:hover > .content.fade { 
  opacity: 1; 
} 

আপনি যদি ফাইলটি সংরক্ষণ করেন এবং আপনার ব্রাউজারটি পরীক্ষা করেন, তাহলে আপনি ফেড-ইন অ্যানিমেশন কার্যকর দেখতে পাবেন। কিন্তু আপনি এটাও লক্ষ্য করতে পারেন যে টেক্সটটি পড়া একটু কঠিন (যদি ছবিটি স্টার্ক হয় এবং এতে অনেক বৈসাদৃশ্য থাকে)। মনে রাখবেন যে সমস্ত ইমেজ একটি ক্লাস নাম আছে ঝাপসা . এটি চিত্রগুলিকে অস্পষ্ট করার জন্য তাদের এবং পাঠ্যের মধ্যে কিছু অতি-প্রয়োজনীয় বৈসাদৃশ্য যোগ করার জন্য:

 image-wrapper:hover > img.blur { 
  filter: blur(5px) 
} 

এখন আপনি যখন ছবিটির উপর কার্সার করবেন, আপনি দেখতে পাবেন যে এটি কেবল অস্পষ্ট হয়ে যাবে। আপনি ছবিগুলিতে অস্পষ্টতাকে আরও স্পষ্ট করতে পিক্সেলের মান বাড়াতে পারেন, যার ফলে এটি এবং পাঠ্যের মধ্যে আরও বৈসাদৃশ্য যোগ করা যায়।

অন্যান্য প্রভাব যোগ করা

অন্যান্য প্রভাবগুলি হল বাম থেকে পাঠ্য স্লাইড করা, চিত্রটি জুম করা এবং ছবিতে গ্রেস্কেল যুক্ত করা। এখানে তিনটি প্রভাব অর্জনের জন্য কোড আছে:

 .image-wrapper > .content.slide-left { 
    transform: translateX(100%) 
} 
 
.image-wrapper:hover > .content.slide-left { 
    transform: translateX(0%) 
} 
 
.image-wrapper:hover > img.grey { 
    filter: greyscale(1) 
} 
 
.image-wrapper:hover > img.blur { 
    filter: blur(5px) 
} 
 
.image-wrapper:hover > img.zoom { 
    transform: scale(1.1) 
} 

ফাইলটি সংরক্ষণ করুন, তারপরে আপনার ব্রাউজারে যান এবং প্রতিটি চিত্রের উপর হোভার করুন। আপনি কর্মে বিভিন্ন প্রভাব দেখতে হবে.

স্লাইড-ইন ইফেক্ট সম্পূর্ণ করতে, আপনি আরও তিনটি ইমেজ র‍্যাপার তৈরি করতে পারেন, প্রতিটিতে একটি ইমেজ এবং টেক্সট রয়েছে। পাঠ্যের প্রতিটি অংশের ক্লাসের নাম থাকবে পিছলে পরা , নিচে স্লাইড, বা সামান্য-ডান . তারপর আপনি সঠিক মান পাস চাই পিক্সেল, এম, বা রেম , ভিতরে রূপান্তর() তিনটি প্রভাব তৈরি করতে ফাংশন।

সিএসএস গ্রিড এবং ফ্লেক্সবক্স

CSS গ্রিড এবং ফ্লেক্সবক্স দুটি বৈশিষ্ট্য যা আপনাকে আপনার ওয়েবসাইটের জন্য চমৎকার লেআউট তৈরি করতে দেয়। আপনি কার্যত যেকোন লেআউট তৈরি করতে পারেন যা আপনি সহজে চান এবং সারি এবং কলামগুলি আপনার পছন্দ অনুযায়ী কাস্টমাইজ করতে পারেন। কলামগুলিও ডিফল্টরূপে প্রতিক্রিয়াশীল হতে চলেছে৷ কখন একটির উপর অন্যটি ব্যবহার করতে হবে তা শেখা আপনাকে শীর্ষ এক শতাংশ CSS বিকাশকারী হতে সাহায্য করবে৷