نحوه محو کردن تصاویر روی Mouseover در وردپرس (ساده و آسان)

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

افزودن Image Fade در Mouseover به تمام تصاویر وردپرس

این یک کد کوتاه ایجاد می‌کند که می‌توانید آن را به هر صفحه، پست یا منطقه آماده برای ویجت اضافه کنید.

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

امتیاز: متحرک کردن هر تصویر، متن، دکمه و موارد دیگر

در این مقاله به شما نشان خواهیم داد که چگونه یک افکت تصویر محو شده بر روی ماوس در وردپرس اضافه کنید.

چرا تصاویر را روی Mouseover در وردپرس محو کنید؟

با WPCode، حتی مبتدیان می توانند کد وب سایت خود را بدون خطر اشتباهات و اشتباهات تایپی ویرایش کنند که می تواند باعث بسیاری از خطاهای رایج وردپرس شود.

ساده ترین راه برای افزودن افکت محو شدن به تمام تصاویر خود استفاده از WPCode است. این افزونه رایگان به شما این امکان را می دهد که به راحتی کدهای سفارشی را در وردپرس بدون نیاز به ویرایش فایل های تم خود اضافه کنید.

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

برای انجام این کار، به سادگی یک قطعه کد سفارشی ایجاد کنید و کد انیمیشن محو را طبق همان فرآیندی که در بالا توضیح داده شد، اضافه کنید. سپس، روی دکمه «ذخیره قطعه» کلیک کنید.

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

برخلاف برخی انیمیشن‌های دیگر، تصویر محو شده روی افکت ماوس ظریف است، بنابراین تأثیر منفی بر تجربه خواندن بازدیدکننده یا هر بهینه‌سازی تصویری که انجام داده‌اید، نخواهد داشت.

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

همچنین می‌توانید با تغییر دادن مقدار «Opacity» را بیشتر یا کمتر کنید opacity:0.6 خط

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

img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}