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

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

اساساً وقتی کاربر ماوس خود را بر روی تصویری در سایت شما قرار می دهد ، کمی کمرنگ می شود. نمونه تصویر را در زیر مشاهده کنید:

image fade effect

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

.post img: شناور {
تیرگی: 0.6؛
فیلتر: آلفا (کدورت = 60) ؛ / * برای IE8 و نسخه های قبلی * /
}

این قطعه CSS تمام تصاویر نمایش داده شده در پست های وردپرس را تحت تأثیر قرار می دهد. با این حال ، یک اشکال جزئی در این قطعه وجود دارد. وقتی کاربر ماوس را به سمت یک تصویر می برد ، بلافاصله کدورت را تغییر می دهد. این احساس کمی خشن است ، درست است؟ بیایید با اضافه کردن قوانین انتقال CSS ، آن را کمی نرم تر کنیم.

.post img: شناور {
تیرگی: 0.6؛
فیلتر: آلفا (کدورت = 60) ؛ / * برای IE8 و نسخه های قبلی * /
-webkit-transfer: همه 2S راحت است.
-moz-transfer: همه 2 ها راحت هستند.
-ms-transfer: سهولت 2s؛
-o-transfer: همه 2s راحت هستند.
انتقال: همه 2S سهولت دارند؛
}

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

.post img {
تیرگی: 0.7؛
فیلتر: آلفا (کدورت = 70)؛ / * برای IE8 و نسخه های قبلی * /
}
.post img: شناور {
تیرگی: 1.0؛
فیلتر: آلفا (کدورت = 100) ؛ / * برای IE8 و نسخه های قبلی * /
-webkit-transfer: همه 2S راحت است.
-moz-transfer: همه 2 ها راحت هستند.
-ms-transfer: سهولت 2s؛
-o-transfer: همه 2s راحت هستند.
انتقال: همه 2S سهولت دارند؛
}

ممکن است برخی از کاربران ما نخواهند این اثر را به همه تصاویر موجود در پست های خود اضافه کنند. چطور فقط تصاویر برجسته یا تصاویر کوچک پست ؟ برای افزودن این افکت به تصاویر کوچک پست خود ، می توانید از کلاس پیش فرض .wp-post-image ایجاد شده توسط WordPress برای تصاویر برجسته استفاده کنید. به سادگی .post img: hover را با img.wp-post-image: hover جایگزین کنید.

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

منبع:
https://www.wpbeginner.com/wp-themes/fade-images-mouseover-wordpress/.

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