تصاویر باعث افزایش تعامل کاربر در وب سایت ها می شود. به همین دلیل است که شما باید بهینه سازی تصاویر ، با نحوه افزودن گالری تصاویر زیبا ، و هر مشکلات تصویر در سایت شما. روش های زیادی برای برجسته کردن تصاویر شما وجود دارد. یکی از آنها استفاده از افکت محو شدن روی تصاویر است. در این مقاله ، ما به شما نشان خواهیم داد که چگونه تصاویر را با تغییر ماوس در وردپرس محو کنید.
اساساً وقتی کاربر ماوس خود را بر روی تصویری در سایت شما قرار می دهد ، کمی کمرنگ می شود. نمونه تصویر را در زیر مشاهده کنید:
ابتدا به شما نشان خواهیم داد که چگونه می توانید اثر محو شده ساده بر روی تصاویر موجود در پست های وردپرس خود را اضافه کنید. ما برای اینکار از 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/.