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

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

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

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

افکت کپشن برای تصاویر در 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.

منبع

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

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

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

  3. سلام .سایتتون واقعا فوق العاده‌ست با این سایت از هر آموزش دیگه ای بی نیاز میشیم.
    یه چیزی میخواستم پیاده سازی کنم فک کردم شما حتما میتونید کمک کنید.
    میخوام کاری کنم که یه باگس فقط background‌ش filter:blur(3px) بگیره.
    یعنی این ن باکس من یه حالت شیشه ای بگیره

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *