Увеличить Уменьшить изображение с заголовком Снаружи ⇐ CSS

[Anonymous]

Я пытаюсь добавить эффект увеличения и уменьшения масштаба к изображению, когда мы наводим курсор на изображение и заголовок.
В настоящее время он работает только при наведении курсора на изображение и не работает, когда я наводю курсор на изображение. Заголовок.
Итак, по сути, я хочу, чтобы он работал в обоих случаях, то есть при наведении курсора на изображение и при наведении на заголовок.
Я добавляю мой Html и Css ниже для справки.
ПРИМЕЧАНИЕ. Я не могу вносить какие-либо изменения в HTML из-за некоторых ограничений, поэтому, пожалуйста, помогите мне решить эта проблема возникает только при внесении изменений в CSS.
CSS:

Код: Выделить всё

.country_list_container {
position: relative !important;
}

.country_list_image img {
display: block !important;
margin: 0 auto !important;
transition: all ease-in-out 0.3s !important;
}

.country_list_image:hover img {
transform: scale(1.2) !important;
}

.country_list_title {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}

HTML:

Код: Выделить всё

[url=#]
[img]https://picsum.photos/200[/img]
[/url]

[url=#]IMAGE TITLE[/url]

Источник: https://stackoverflow.com/questions/781 ... le-outside