گاهی اوقات ظاهر یک کارت و یا تصویر بصورتی است که عنوان یا کپشن در یک لایه مجزا بر روی آن قرار دارند و معمولا در زمانی که کاربر موس را بر روی آن عنصر میبرد محتوای بیشتری پدیدار میشود.
نمونهای را در تصویر زیر مشاهده میکنید:
نکتهای که در پیادهسازی این طرح وجود دارد این هست که باید مراقب این بود که احتمال اینکه کپشن یا عنوان چند سطری شوند زیاد است، در واقع ما به عنوان یک توسعهدهنده معمولا کنترلی بر روی محتوایی که قرار است بر روی سایت قرار بگیرد نداریم، در نتیجه باید تا حد امکان پیشبینیهای مختلف را انجام داده و طرح را بصورت پویا پیادهسازی کنیم.
در ادامه در قالب ویدیو نحوه پیادهسازی این افکت را در سیاساس بررسی میکنیم:
ساختار کارتها
<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.
سلام جناب سیدی عزیز
کارتون عالیه واقعا. خیلی چیز ها از شما یاد گرفتم. واقعا ممنونم از شما و سایت سیار خوبی که راه انداختین. بسیار کمک کننده هستش سایت
.انشاالله که مطالب اینچنینی ادامه دار باشه و ما از شما بیشتر یاد بگیریم همچنیان
راستی جناب سیدی خوب میشه که ویدئو هایی در مورد کاربرد رنگ ها و تئوری اونها در طراحی و همچنین کاربرد درست تایپو گرافی و سایز بندی درست عناصر در طراحی رو هم قرار بدین در سایت
سلام، استاد خیلی هم عالی بود خسته نباشید، بسیار استفاده کردیم
سلام .سایتتون واقعا فوق العادهست با این سایت از هر آموزش دیگه ای بی نیاز میشیم.
یه چیزی میخواستم پیاده سازی کنم فک کردم شما حتما میتونید کمک کنید.
میخوام کاری کنم که یه باگس فقط backgroundش filter:blur(3px) بگیره.
یعنی این ن باکس من یه حالت شیشه ای بگیره
سلام، ممنونم، عذرمیخوام بابت تاخیر در پاسخ
ویژگی backdrop-filter احتمالا چیزی هستش که میخواین.