Для того чтобы сделать изображение товара нечетким или скрытым для пользователей, которые не авторизованы, можно использовать CSS фильтры или размытие. Например, можно добавить стиль "filter: blur(5px);" к изображению товара или применить стиль "opacity: 0.5;" для делания его полупрозрачным.
Чтобы настроить условие, при котором изображения товаров будут доступны только после авторизации пользователя, необходимо использовать серверную или клиентскую логику. На сервере можно проверить статус авторизации пользователя и возвращать изображения только после успешной авторизации. На клиентской стороне можно использовать JavaScript для скрытия или размытия изображений до того момента, пока пользователь не авторизуется.
Пример кода на JavaScript:
```javascript
if (!isLoggedIn) {
document.querySelectorAll('.product-image').forEach(image => {
image.style.filter = 'blur(5px)';
// или image.style.opacity = '0.5';
});
}
```
В данном примере, изображения с классом "product-image" будут размыты или полупрозрачными для неавторизованных пользователей. После авторизации пользователю нужно будет обновить страницу или выполнить запрос к серверу, чтобы получить изображения товаров в обычном виде.