Поднятие картинки при наведении

@Magicspree · Регистрация: 12.09.2017

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
6
<div class="long" id="long" >
<img src="images/57a091c115d5f1564b395a41.png" name="dota" width="83" height="78" usemap="#dotaMap" class="dota" id="dota" border="0">
 
 
<div> <input type="button" class= "baton" value="         привет          " >
</div>

Хотел реализовать с помощью CSS, но не удалось. Получилось ток при наведении на картинку

CSS
1
2
3
4
5
6
7
8
9
10
11
img.dota:hover {
-webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    -moz-transition: transform .5s ease, -moz-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
        -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px)
}

Помогите, может это как то возможно реализовать через JS?

@GRO_UA · 25.07.2018, 13:59

CSS
1
2
3
4
5
6
7
8
9
10
11
.long:hover img {
-webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    -moz-transition: transform .5s ease, -moz-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
        -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px)
}

@Magicspree · 25.07.2018, 14:02 **[ТС]**

бЛЛЛИН так легко чтоль?

Спасибо большое,прям огромное, а можно еще вопрос, а как сделать так чтоб она не падала резко?

@GRO_UA · 25.07.2018, 14:08

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.long:hover img {
-webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    -moz-transition: transform .5s ease, -moz-transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease, -moz-transform .5s ease;
        -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
    transition: all 1s ease;
}
.long img{
  transition: all 1s ease;
}

@Magicspree · 25.07.2018, 14:14 **[ТС]**

Просто еще раз огромнейшее спасибо, наиогромнейшее просто спасибо. Очень выручили.
Я не хочу борзеть, но еще один вопрос, не знаете случаем как заменить текст на кнопке при наведении на блок div?
Видел много вариантов, но не подходит под мой код

Там в основном через <button>
а у меня через <input>. Если знаете подскажите пожалуйста

HTML5
1
2
<div> <input type="button" class= "baton" value="         Билет по 100           " >
</div>

@GRO_UA · 25.07.2018, 14:17

Не совсем понял, при наведении на блок меняется value=" Билет по 100 " на что-то другое?

@Magicspree · 25.07.2018, 14:22 **[ТС]**

Да, заменяется например на "август"

@GRO_UA · 25.07.2018, 14:26

На сколько мне известно, заменяет js
Возможно лежит в js файле.
Мой совет, проще всего: сделайте поиск по нужной фразе в файлах, там и замените.
Например: Меняется текст на "Я на море" вот, эту фразу и ищите.
Тот кусок кода что Вы дали выше - это код самой кнопки.

@Magicspree · 25.07.2018, 14:29 **[ТС]**

Не совсем понял, что вы имели в виду, но у меня никаких файлов нет, все делаю с нуля. Но в крайнем случаем спасибо, буду искать инфу по JS

@GRO_UA · 25.07.2018, 14:44

Если нужен код, ищите в гугле, я по js не силен)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

Поднятие картинки при наведении

Решение

Решение

@Magicspree 0 / 0 / 0 Регистрация: 12.09.2017 Сообщений: 200
	25.07.2018, 14:02 [ТС]
	бЛЛЛИН так легко чтоль? Спасибо большое,прям огромное, а можно еще вопрос, а как сделать так чтоб она не падала резко? 0

@GRO_UA 10 / 9 / 9 Регистрация: 04.07.2018 Сообщений: 70
	25.07.2018, 14:17
	Не совсем понял, при наведении на блок меняется value=" Билет по 100 " на что-то другое? 0

@Magicspree 0 / 0 / 0 Регистрация: 12.09.2017 Сообщений: 200
	25.07.2018, 14:22 [ТС]
	Да, заменяется например на "август" 0

@GRO_UA 10 / 9 / 9 Регистрация: 04.07.2018 Сообщений: 70
	25.07.2018, 14:26
	На сколько мне известно, заменяет js Возможно лежит в js файле. Мой совет, проще всего: сделайте поиск по нужной фразе в файлах, там и замените. Например: Меняется текст на "Я на море" вот, эту фразу и ищите. Тот кусок кода что Вы дали выше - это код самой кнопки. 0

@Magicspree 0 / 0 / 0 Регистрация: 12.09.2017 Сообщений: 200
	25.07.2018, 14:29 [ТС]
	Не совсем понял, что вы имели в виду, но у меня никаких файлов нет, все делаю с нуля. Но в крайнем случаем спасибо, буду искать инфу по JS 0

@GRO_UA 10 / 9 / 9 Регистрация: 04.07.2018 Сообщений: 70
	25.07.2018, 14:44
	Если нужен код, ищите в гугле, я по js не силен) 0