اینکه به کاربران سایت مان نشان دهیم کدام قسمت ها از سایت قابل کلیک کردن هست یکی از کارهای مهمی است که در بحث UX (تجربه کاربری) باید انجام دهیم . راه حل قدیمی و طلایی این بود که رنگ متن رو عوض کنیم و یک خط زیرین به آن دهیم .امروزه با CSS راه های خیلی زیادی هست که می توانیم این افکت را اعمال کنیم مخصوصا روی تصاویر.

توسعه دهندگان رابط کاربری امروزه می توانند افکت های Transition یا Animation را وقتی رویداد Hover اتفاق می افتد اعمال کنند. منظور اسلاید های هدایت شده ، زوم در سرعت های مختلف، محو شدن و نمایش محو گونه، افکت لولا ، نورافکن ، لرزش ، پرش و … است.

در این مجموعه بیش از ۲۵۰ افکت مختلف Hover برای دادن ایده به شما وجود دارد.می توانید کدهای هر کدام را به آسانی برداشته و استفاده کنید.

Image Hover Effects (با ۱۶ افکت)

در این صفحه شما ۱۶ افکت زیبا در مورد افکت هاور تصاویر با عنوان پیدا می کنید. برای دریافت کد HTML و CSS هر کدام از افکت ها کافیست روی تصویر رفته و دکمه Show Code را بزنید.

Image Caption Hover Animation (با ۴ افکت)

اینجا ۴ افکت زیبا برای تصاویر هست وقتی که موس را روی شان می برید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript درشان استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.

iHover (با ۳۵ افکت)

iHover مجموعه ای از افکت های Hover است که با CSS3 ایجاد شده اند. ۲۰ افکت آن به شکل دایره و ۱۵ افکت آن به شکل مربع است. برای استفاده باید مقداری کد HTML بنویسید و فایل CSS را به صفحه HTML اضافه کنید.

Image Hover (با ۴۴ افکت)

این کتابخانه حاوی ۴۴ افکت زیبای دیگر است که با CSS خام ایجاد شده اند. یک نسخه دیگر از این کتابخانه نیز هست که شامل ۲۱۶ افکت است که در صورت تمایل می توانید با ۱۴ یورو خریداری کنید.

Hover Effect Ideas (با ۳۰ افکت)

این پیش نمایش افکت هاور توسط Codrops ایجاد شده است و می تواند در ایجاد یک افکت زیبا بین عکس و عنوان عکس ،الهام بخش شما باشد. جمعا ۳۰ افکت در دو بخش را می توانید اینجا به همراه کدهای HTML و CSS ببینید.

Hover CSS (با ۱۰۸ افکت)

این کتابخانه به شما کمک می کند تا افکت های هاور را به هر عنصری از دکمه و لینک گرفته تا عکس اعمال کنید. این کتابخانه افکت های زیادی را در خود دارد و به صورت CSS , SASS و LESS در دسترس است.

Animatism (با ۱۰۰+ افکت)

بیشتر از ۱۰۰ افکت هاور تصویر برای دکمه ها ، عناوین ، تصاویر و … در این کتابخانه موجود است.همه افکت ها با CSS3 خام ایجاد شده اند.

See the Pen Pure CSS3 Image Hover Animations by Sahar Ali Raza (@mrsahar) on CodePen.

Caption Hover Effect (با ۷ افکت)

۷ افکت را می توانید داخل این کتابخانه پیدا کنید.همه حرکات این افکت ها زیبا و نرم است . برای آموزش اینکه چطور باید آنها را استفاده کنید می توانید اینجا رو ببینید.

CSS Image Hover Effects (با ۱۵ افکت)

مجموعه ای از افکت های ساده هاور مثل زوم، اسلاید، چرخش، خاکستری کردن ، محو کردن و شفافیت را در خود دارد. برای استفاده از این افکت ها باید Class هر کدام را قبل از تگ figure اضافه کنید.

See the Pen demo:CSS image hover effects by Naoya (@nxworld) on CodePen.

Direction-aware 3D hover effect

این یک افکت فوق العاده جذاب است که آخرین موقعیت موس شما را تشخیص می دهد. عنوان عکس با توجه به آخرین موقعیت موس شما از یکی از چهار سمت باز می شود.

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

SVG clip-Path Hover Effect

یک افکت هاور فوق العاده عالی نورافکن با clip-path در svg و CSS Transition . به خوبی در Opera,Safari و Chrome کار می کند.

See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.

منبع