Для начала нужно убрать из .item-photo background. В html элементе с классом item-photo добавить еще один класс, в котором и будут прописаны фото.
Также в твоем методе есть огромный минус, что при ховер эффекте грузится новая фотка и когда пользователь будет наводить мышку на картинку, будет подтупливаться на несколько секунд пока не загрузится новый файл.. очень неприятный эффект. Тут лучше объединить две фотографии в одну и через background-position сдвигать при hover.
И конечно лучше всего такое сделать на js, чтоб универсальное что-то было.. чтоб потом при добавлении нового товара не вспоминать как устроена система, а просто создать новый файл с похожим именем.