Плавно увеличивать и уменьшать картинку
 

Доброй ночи уважаемые, прошу Вашей помощи так как сам немогу решить задачу.
Итак, есть у меня сайт на тестовом домене http://test2.muz-bar.ru/ и мне нужно на главной сделать так, чтобы отдельные блоки с картинками во время наведения мышки плавно увеличивались и уменьшались, а другие наоборот – до наведения мышки на блок с картинкой, картинка увеличивается и уменьшается, а во время наведения мышки на блок – изменение размеров картинки останавливается.
Но ето еще не все – поверх картинок выводится тайтл соответствующих постов и необходимо сделать так, чтобы во время наведения на тайтл или полоску с фоном на которой находится тайтл не происходило так, как-будто мышку отвели от блока в сторону, как сейчас происходит.
В общем пробовал сделать на css, чуток получилось, но не все, а дальше ступор.
Нужные мне блоки расположены на сайте ниже контактных номеров телефонов вверху справа (2 штуки), и еще ниже на етой же странице нужно будет так сделать, но если поможете с верхними, то нижние по аналогии сам сделаю. Спасибо

Нет вариантов решения задачи на js? или я не понятно все обьяснил? возможно есть инное решение, без js? я в ступоре... прошу Вашей помощи или подсказок

Используйте :hover на элементе, внутри которого находится картинка...

https://codepen.io/Malleys/pen/NmWyYX?editors=1100

Спсибо за ответ, использую, но проблема в том, что поверх того элемента размещено еще два элемента - серая полоска и название статьи. Мне нужно сделать так - чтобы когда наводишь мышкой на ети внутренные элементы, задний фон не возвращался бы к своему прежнему размеру, как ето происходит сейчас, если вам не трудно, то взгляните сами, справа от слайдера, вверху страницы два поста: "Тест — пост 3 — для слайдера" и "Тест — пост 2 — для слайдера", поводите по етим блокам мышкой и увидете как фоновые картинки меняют размеры, ссылка на сайт - http://test2.muz-bar.ru/

Так в чём проблема? Я же написал ответ, и даже пример привёл!

У вас в файле style.css на 156 строке написано...

.top-right-post img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

а надо...

.top-right-post:hover img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}

Malleys,
да, действительно заработало, большое спасибо, как все бывает просто...:victory: