در این آموزش ویدیویی کوتاه به شما یاد داده ایم که چگونه برای باکس های خود قابلیت Blur یا تاری و یا زوم Zoom ایجاد کنید .
Blur در CSS چیست ؟
شما با تابع blur در CSS میتوانید افکت محو یا تاری ایجاد کنید.( دقیقا شبیه تصویر زیر ) و اکثر مرورگر ها از این قابلیت پشتیبانی میکنند به جز مرورگر های قدیمی و یا مرورگر هایی که نسخه قدیمی دارند.
چگونه از Blur در المنتور استفاده کنم ؟
با استفاده از آموزش بالا و همچنین استفاده از کدهای CSS زیر میتوانید به راحتی از این قابلیت استفاده کنید .
/*Blur Zoom Hover Effect*/
selector{
–zoom-in: 1.2;
–zoom-out: 0.9;
–hover-background: white;
}
selector{
transition: all .5;
}
selector:hover .card-box{
filter: blur(5px);
transform: scale(var(–zoom-out));
}
.card-box{
transform: scale(1);
transition: all .5s;
}
.card-box:hover{
transform: scale(var(–zoom-in)) !important;
z-index: 2;
filter: blur(0px) !important;
}
selector .elementor-widget-wrap{
transition: all .5s;
}
selector .card-box:hover .elementor-widget-wrap{
background: var(–hover-background) !important;
}
16 پاسخ
سلام وقت بخیر؛ ممنون میشم اگه کد css بلر کردن بک گراند مگامنو هم بذارین باتشکر.
سلام خدمت شما دقیقا به چه صورتی ؟
سلام زوم نمیشه چرا ؟؟؟
سلام استاد خیلی کارتون درسته لطفا یک دوره اموزشی سی اس اس بسازید
سلام وقت بخیر
ممنون از شما
بله بزودی در سایت قرار داده می شود .
سلام و خسته نباشید خدمت شما
این کد رو وارد می کنیم خطا های زیادی میده
لطفا پیگیری کنید ممنون
سلام لطفا کد خطا را اعلام کنید
سلام
چرا /property zoom /out/in و hover رو نمیشناسه و مثلث زرد میا و این افکت هم اجرا نمیکنه
فقط تار بودن اجرا میشه
سلام وقت بخیر
کد مجدد بررسی شد مشکلی در این خصوص نیست لطفا به نحوه کلاس گذاری دقت کنید
زوم نمیشه
سلام وقت بخیر کد را مجدد بررسی کنید
با سلام و تشکر از آموزش ،این بخش رو پیاده سازی کردم و تاری رو نشون میده اما زوم رو نه اگر امکانش هست راهنمایی بفرمایید
سلام وقت بخیر
لطفا مجدد بررسی نمایید به این دلیل که کدها مجدد چک شد و موردی ندارند .
احتمالاً قسمتی را به درستی انجام نداده اید .
موفق باشید
فوق العاده بود واقعا ممنون
چرا ویدیویی که قرار دادید رو نمیتونیم جلو عقب کنیم.
باید هی رفرش کنیم صفحه رو و از اول ببینیم .
سلام وقت بخیر
مشکل از سمت مرورگر شما می باشد لطفا با یک مرورگر دیگه تست بفرمایید.