در این آموزش ویدیویی کوتاه به شما یاد داده ایم که چگونه برای باکس های خود قابلیت 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;
}
25 پاسخ
سلام خسته نباشیدیه سوال داشتم چطوری میشه این کد برای 4 تا محصول یا بیشتر اجرا بشه چون من با 4 تا که امتحان کردم دو تاش بلر شد
و یه مشکل هم دارم اینکه زوم نمیشه
سلام خدمت شما
باید کلاس یا شناسه اختصاصی رو به همه محصولات بدید و در کد CSS هم همون کلاس رو جایگزین selector کنید
برای مشکل زوم هم مطمئن بشید مقادیر –zoom-in و –zoom-out درست تعریف شدن و به جای خط تیره معمولی از خط تیره استاندارد CSS (-) استفاده کنید
سلام روز بخیر ،
میخواستم بدونم چجوری میشه روی باکس های که داخل لوپ گرید ساختیم قرار داد این کد. Css رو
سلام درود بر شما
طبق آموزش پیش بروید و داخل آن به راحتی میتوانید ایجاد کنید اگر مشکلی برخورد کردید ما در خدمت شما هستیم و سوال خودتان را بپرسید فقط یادت باشه برای تیتر و لینک دهی از برچسب پویا استفاده کنید
سلام. ممنون از آموزش
با کانتینر که طراحی میکنم ، فقط بلر اتفاق میفته و زوم زو ندارم. راهکار برای اینکه با طراحی های کانتینر هم سازگاری داشته باشه بفرمایین.
ممنون
سلام درود بر شما
روی کانتینر کلیک کنید و به تب پیشرفته در بخش Transform بررسی کنید که مقدار مقیاس روی مقدار مناسب (مثلاً 1.1 یا 1.2) تنظیم شده باشد اگر Scale روی 1 باشد، تغییری در زوم ایجاد نمیشود.
سلام
زوم اجرا نمیشه ، فقط بلر اجرا میشه
لطفا راهنمایی بفرمایید و کلا مو به مو اجرا کردم
سلام وقت بخیر برای اسلاید های بیشتر از سه تت چکار کنیم..
سلام
اسلاید هام 4 تاس فقط رو سه تا اعمال میشه چیکار کنم رو چهارمی هم اعمال شه؟
سلام وقت بخیر؛ ممنون میشم اگه کد css بلر کردن بک گراند مگامنو هم بذارین باتشکر.
سلام خدمت شما دقیقا به چه صورتی ؟
سلام زوم نمیشه چرا ؟؟؟
سلام استاد خیلی کارتون درسته لطفا یک دوره اموزشی سی اس اس بسازید
سلام وقت بخیر
ممنون از شما
بله بزودی در سایت قرار داده می شود .
سلام و خسته نباشید خدمت شما
این کد رو وارد می کنیم خطا های زیادی میده
لطفا پیگیری کنید ممنون
سلام لطفا کد خطا را اعلام کنید
سلام
چرا /property zoom /out/in و hover رو نمیشناسه و مثلث زرد میا و این افکت هم اجرا نمیکنه
فقط تار بودن اجرا میشه
سلام وقت بخیر
کد مجدد بررسی شد مشکلی در این خصوص نیست لطفا به نحوه کلاس گذاری دقت کنید
زوم نمیشه
سلام وقت بخیر کد را مجدد بررسی کنید
با سلام و تشکر از آموزش ،این بخش رو پیاده سازی کردم و تاری رو نشون میده اما زوم رو نه اگر امکانش هست راهنمایی بفرمایید
سلام وقت بخیر
لطفا مجدد بررسی نمایید به این دلیل که کدها مجدد چک شد و موردی ندارند .
احتمالاً قسمتی را به درستی انجام نداده اید .
موفق باشید
فوق العاده بود واقعا ممنون
چرا ویدیویی که قرار دادید رو نمیتونیم جلو عقب کنیم.
باید هی رفرش کنیم صفحه رو و از اول ببینیم .
سلام وقت بخیر
مشکل از سمت مرورگر شما می باشد لطفا با یک مرورگر دیگه تست بفرمایید.