پویاسازی افکت کپشن برای یک کارت یا تصویر در CSS

گاهی اوقات ظاهر یک کارت و یا تصویر بصورتی است که عنوان یا کپشن‌ در یک لایه مجزا بر روی آن قرار دارند و معمولا در زمانی که کاربر موس را بر روی آن عنصر می‌برد محتوای بیشتری پدیدار می‌شود.

نمونه‌ای را در تصویر زیر مشاهده می‌کنید:

نکته‌ای که در پیاده‌سازی این طرح وجود دارد این هست که باید مراقب این بود که احتمال اینکه کپشن یا عنوان چند سطری شوند زیاد است، در واقع ما به عنوان یک توسعه‌دهنده معمولا کنترلی بر روی محتوایی که قرار است بر روی سایت قرار بگیرد نداریم، در نتیجه باید تا حد امکان پیش‌بینی‌های مختلف را انجام داده و طرح را بصورت پویا پیاده‌سازی کنیم.

در ادامه در قالب ویدیو نحوه پیاده‌سازی این افکت را در سی‌اس‌اس بررسی می‌کنیم:
‌

ساختار کارت‌ها

<article>
  <img src="" class="card__image" alt="" />
  <div class="card__overlay">
    <div class="card__header">
      <img class="card__thumb" src="" alt="" />
      <div class="card__header-text">
        <h3 class="card__title"></h3>
        <span class="card__status"></span>
      </div>
    </div>
    <p class="card__description"></p>
  </div>
</article>

خطوط کلیدی در CSS

تکنیک استفاده شده از ویژگی transform و تابع translate استفاده می‌کند.

.card {
  position: relative;
  overflow: hidden;
}

.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;       
  transform: translateY(100%);
}

.card:hover .card__overlay {
  transform: translateY(0);
}

.card__header {
  transform: translateY(-100%);
}

.card:hover .card__header {
  transform: translateY(0);
}

دمو

See the Pen
CSS-only Slide-up Caption Hover Effect by Mojtaba Seyedi (@seyedi)
on CodePen.