কিভাবে তৈরি করা: ছবির ওভারলে স্কেলিং

মাউস অবরোধ করার সময় ছবির ওভারলে স্কেলিং ইফেক্ট তৈরি করা কিভাবে শিখুন。

একটি ওভারলে স্কেলিং ইফেক্ট তৈরি করা কিভাবে

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* সংযোজিত কাঠামো যা আধারস্তর প্রদান করে। প্রয়োজনীয়ভাবে প্রস্থতা সংযোজন করুন */
.container {
  position: relative;
  width: 50%;
}
/* ছবিকে প্রতিক্রিয় করতে সক্ষম করা */
.image {
  width: 100%;
  height: auto;
}
/* সম্পূর্ণ উচ্চতা ও প্রস্থতা নিয়ে অবস্থানকারী অবকাঠামো - ক্ষেত্রের উপর ও ছবির উপর */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* ক্ষেত্রকে মাউস অবরোধ করলে, সংযোজিত টেক্সট ‘স্কেল’ দেখানো হবে */
.container:hover .overlay {
  transform: scale(1);
}
/* আধারস্তরের কিছু টেক্সট, অথবা সমতল ও অনুভূমিক দিকে কেন্দ্রীভূত অবস্থান */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

আপনার নিজের হাতে চেষ্টা করুন

সংক্রান্ত পাতা

শিক্ষাকোষ:CSS ছবি

শিক্ষাকোষ:如何创建图像叠加悬停效果