Смена картинок при наведении курсора мышки

Сообщений: 177 Регистрация: Ноя 2010

13 Ноября 2015 08:52

Добрый день, уважаемые форумчане! Подскажите, пожалуйста, как реализовать на сайте, такое, чтобы на определенной странице имелся текст и картинка, а при наведении курсора мышки данная картинка менялась на другую, при смещении курсора мышки от картинки она возвращалась в первоначальную. Может есть какой-то плагин, чтобы смена картинки была с какими-нибудь эффектами? Заранее благодарен.

30.000 подписчиков в Инстаграм САМОСТОЯТЕЛЬНО (Автодирект, комментарии, отписка, лайки), а Заработать можно тут!. Надежный, недорогой хостинг!.

Библиотекарь

Сообщений: 13 Регистрация: Апр 2013

13 Ноября 2015 09:40

Если на чистом CSS то приблизительно так:1. Создаем блок с background-image
2. В этот блок помещаем второе изображение, но делаем к примеру opacity=0 или width=0;height=0;
3. На событие hover навешиваем opacity=1 или width=(реальная ширина изображения);height=(реальная высота изображения);
4. анимируем это дело переходами transitionВ первом случае изображение будет плавно проявляться сквозь фон. Во втором как бы приближаться из бесконечности к пользователю.

Алексей

Сообщений: 177 Регистрация: Ноя 2010

13 Ноября 2015 15:37

К сожалению не приходилось работать с CSS. Если есть возможность расписать на небольшом примере, чтобы было понятно, либо если есть еще какие-нибудь альтернативные варианты? Заранее благодарен.

Feanorr

Сообщений: 565 Регистрация: Янв 2013

13 Ноября 2015 15:55

Алексей, Если вам не приходилось работать с CSS, то лучше заплатите человеку он вам всё сделает. Другого решения просто не вижу...

sharkson

Сообщений: 5425 Регистрация: Янв 2014

13 Ноября 2015 16:02

Цитата
Алексей пишет: К сожалению не приходилось работать с CSS.

Значит или надо начинать самому, или нанять кого-то.

НАДЕЖНЫЙ И НЕДОРОГОЙ ХОСТИНГ ТУТ
НЕДОРОГОЙ ХОСТИНГ
ПРОДАМ БЛОГ ЖЖ
СОЗДАНИЕ И НАСТРОЙКА MediaWiki и phpbb3

justman

Сообщений: 448 Регистрация: Июн 2015

13 Ноября 2015 16:27

Цитата
Алексей пишет: К сожалению не приходилось работать с CSS. Если есть возможность расписать на небольшом примере, чтобы было понятно, либо если есть еще какие-нибудь альтернативные варианты? Заранее благодарен.

Ребята, как сделать так, чтобы ездить на Феррари. Сразу скажу, купить не предлагать, рассмотрю только альтернативные варианты.
Если без троллинга, то CSS можно освоить за день. Без шуток, реально за день освоите азы, этого достаточно, чтобы реализовать Вашу задачу. Что касается: "Покажите пример", то нет смысла, т.к., вы его даже правильно на сайт не подключите.

Изменено: justman - 13 Ноября 2015 16:29

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

13 Ноября 2015 18:10

ну вот примерно как это должно быть:

Код
div.bla-bla { background-image: url(image1.jpg); } div.bla-bla:hover { background-image: url(image2.jpg); }

т.е создаете блок, через css добавляете ему бекграунд картинку, а через hover добавляете 2-ю картинку. все

Александр

Сообщений: 433 Регистрация: Ноя 2012

13 Ноября 2015 18:31

Dmitrii Lysjuk, примерно так, но не самый лучший вариант, моментально не подгрузится. Лучше использовать спрайты. Статья на хабре http://habrahabr.ru/post/159027/

Coder

Сообщений: 10626 Регистрация: Мар 2013

13 Ноября 2015 18:34

_http://myrusakov.ru/css-hover-image.html

_http://citforum.ru/internet/webd/article_29.shtml

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

Алексей

Сообщений: 177 Регистрация: Ноя 2010

#10

14 Ноября 2015 19:20

Всем спасибо за советы и помощь! То что не приходилось работать, я имел ввиду "вплотную", азы небольшие есть.)))

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

#11

15 Ноября 2015 00:18

Александр, да, спрайты крутая вещь. один файл сделал, он сразу и загрузился, так что не спорю smile:)

просто написал, как сделать замену, так что верно подметили, что

Цитата
Александр пишет: примерно так, но не самый лучший вариант

Похожие темы:

17.10.2020 16:55	Смена темы на WordPress без входа в админку?
12.08.2019 10:36	Отображение картинок.
09.05.2019 12:47	Помогите WPGrabber Статьи парсятся без картинок - сбой сервера
08.03.2018 18:12	Дубли картинок
24.05.2017 09:58	Сохранение картинок

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
18:44 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 13:12 Покупные ссылки 12:57 Rotapost прикрыли! Чем пользоваться? 17:00 Стоит ли добавлять сайт в Rambler топ 100? 15:12 Ночной бар в Паттайе: как случайная встреча с "тайкой" и её кадыком перевернула мой взгляд на продвижение сайта в Google 2026 15:01 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 07:24 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг	17:24 JustProxy.Biz - Резидентные прокси без ограничения по трафику 16:38 GhostRocket.pro — Взлетаем в новую эру криптообмена! 15:31 №1 Рассылка / Инвайтинг [TELEGRAM] \| Приватный метод 15:31 Trustpilot Reviews \| Подниму рейтинг вашей компании 15:30 Продвижение YouTube видео в топ поиска \| Любой тип контента \| Гарантия результата 15:29 Установка\|Настройка\|Доработка\|Наполнение сайтов\|Дизайн\|3D\|Видеомонтаж 13:13 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру)	18:35 С юмором по жизни! 22:59 Про мясо 15:07 Добро пожаловать в цифровой мир... 22:12 BYTIK.shop – сервис по продвижению в популярных социальных сетях 10:10 накрутка трафика в SimilarWeb 16:50 Компьютерная мышь 23:03 Точные прогнозы на футбол