Чтобы одновременно изменить изображение и текст при наведении курсора, вы можете использовать различные методы в зависимости от ваших конкретных требований и технологий, которые вы используете. Вот несколько часто используемых методов:

1. Переход CSS. Вы можете использовать переходы CSS для создания плавного эффекта при наведении курсора на элемент. Примените свойство перехода как к элементам изображения, так и к текстовым элементам, а также укажите свойства CSS, которые вы хотите изменить при наведении курсора, например фоновое изображение или цвет.

2. CSS Sprite: этот метод предполагает использование одного изображения, содержащего несколько состояний или вариаций элемента. Изменяя фоновое положение изображения при наведении, вы можете отобразить другое изображение или состояние. Эту технику можно применить как к изображениям, так и к текстовым элементам.

3. JavaScript/jQuery: вы можете использовать JavaScript или jQuery для обработки события наведения и динамического изменения изображения и текста. Прикрепив к элементам прослушиватели событий, вы можете изменять их свойства, такие как источник или текстовое содержимое, при наведении курсора мыши.

4. CSS-анимация. С помощью CSS-анимации вы можете создавать более сложные и интерактивные эффекты. Вы можете определить ключевые кадры, которые определяют промежуточные состояния элементов изображения и текста и анимируют их свойства при наведении курсора.

5. Анимация SVG. Если вы работаете с изображениями SVG, вы можете использовать анимацию SVG для достижения одновременных изменений при наведении курсора мыши. Анимация SVG позволяет изменять различные атрибуты элементов SVG, включая источники изображений и текстовое содержимое.