Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2019, 02:11
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

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

Нет вариантов решения задачи на js? или я не понятно все обьяснил? возможно есть инное решение, без js? я в ступоре... прошу Вашей помощи или подсказок
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2019, 01:52
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

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

https://codepen.io/Malleys/pen/NmWyYX?editors=1100
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2019, 03:10
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

Сообщение от Malleys
Используйте :hover на элементе, внутри которого находится картинка...
Спсибо за ответ, использую, но проблема в том, что поверх того элемента размещено еще два элемента - серая полоска и название статьи. Мне нужно сделать так - чтобы когда наводишь мышкой на ети внутренные элементы, задний фон не возвращался бы к своему прежнему размеру, как ето происходит сейчас, если вам не трудно, то взгляните сами, справа от слайдера, вверху страницы два поста: "Тест — пост 3 — для слайдера" и "Тест — пост 2 — для слайдера", поводите по етим блокам мышкой и увидете как фоновые картинки меняют размеры, ссылка на сайт - http://test2.muz-bar.ru/
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2019, 03:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Chmil
Спасибо за ответ, использую, но проблема в том, что поверх того элемента размещено еще два элемента - серая полоска и название статьи.
Так в чём проблема? Я же написал ответ, и даже пример привёл!

У вас в файле 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, 01.04.2019 в 03:33.
Ответить с цитированием
  #6 (permalink)  
Старый 01.04.2019, 19:20
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 41

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как обернуть картинку в <a> c ссылкой на саму картинку ufaclub jQuery 1 17.07.2014 22:45
Скрыть div при нажатии на картинку SLameN jQuery 6 14.04.2014 21:27
Фоновую картинку поменять. Jurasmi Элементы интерфейса 11 08.10.2012 15:25
Как правильно забрать картинку с сервера? Serh AJAX и COMET 4 30.07.2012 14:05
Плавно убрать фоновую картинку. Jurasmi Prototype & script.aculo.us 1 05.08.2009 16:48