پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<a class="radikalwp-hov-border" href="#"><img src="https://placehold.co/600x420/e2e8f0/475569?text=Art" alt="اثر هنری"><//a>
.radikalwp-hov-border {
  position: relative;
  display: block;
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
}
.radikalwp-hov-border img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.radikalwp-hov-border::before,
.radikalwp-hov-border::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1.5px solid rgba(255, 255, 255, .9);
  opacity: 0;
  transition: all .45s cubic-bezier(.25, .8, .3, 1);
}
.radikalwp-hov-border::before { inset: 22px 34px; }
.radikalwp-hov-border::after  { inset: 14px 26px; }
.radikalwp-hov-border:hover::before { inset: 14px 18px; opacity: 1; }
.radikalwp-hov-border:hover::after  { inset: 6px 10px; opacity: .55; }

درباره این اسنیپت

قابی که در هاور، دو خط ظریف با فاصله از چهار طرف تصویر داخل آن رسم می‌شوند و حس قاب عکس موزه‌ای می‌دهند. خطوط با inset منفی و transition شبه‌عنصرها ساخته شده‌اند. برای گالری معماری، آثار هنری و وب‌سایت‌های لوکس مناسب است. ظاهر ساکن آن کاملاً تمیز است و فقط با تعامل زنده می‌شود.

پرسش‌های متداول

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

رنگ خط را تیره کنید یا یک اورلی نیمه‌تیره ملایم هم‌زمان با هاور اضافه کنید تا کنتراست خط تضمین شود.

یک div مطلق پایین با متن و opacity صفر بگذارید که در هاور ظاهر شود؛ با تاخیر کمی بیشتر از خطوط، توالی خوبی می‌سازد.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۶ از ۳ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

دیدگاه خود را بنویسید

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پکیج طلایی
پیش‌نمایش زنده اسنیپت

هاور چرخش سه‌بعدی کارت

هاور سه‌بعدی تیلت
۱۰۰
۴.۲ (۱۶)

هاور خط زیرین گرادیانی

هاور لینک خط زیرین
۱۰۰
۴.۲ (۱۶)
اسکرین‌شات‌های پروژه
پیش‌نمایش زنده اسنیپت

هاور پدیدارشدن لایه دوم

هاور پشته لایه
۸۰
۴.۵ (۱۲)