Увеличение картинки при наведении на ссылку

@Noin · Регистрация: 31.12.2009

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

Добрый день! Ситуация такая:
есть два div'а (путь будут id = 1 и id = 2) внутри третьего (id = conteiner). Внутри дива 1 - картинка (тег img), внутри дива 2 - ссылка. Возможно на CSS сделать так, чтобы при наведении на ссылку (например hover) размер картинки изменялся? Или без JS не обойтись?

Vovan-VE · 15.09.2011, 17:50

Noin, А как Вы себе представляете увеличение картинки? У Вас их две - большая и маленькая?

@Noin · 15.09.2011, 18:00 **[ТС]**

нет, просто есть одна картинка в теге img, размера 450х150. (например в CSS height:140px, после наведения height:142px).

для примера код:

CSS
1
2
3
4
5
6
7
8
9
10
#data img{
    padding-bottom:19px;
    padding-left:45px;
    height:140px;
    }
 
#data img:hover{
    height:142px;
    padding-bottom:17px;
    }

Может быть можно как-нибудь вызвать hover принудительно, например по событию onmouseover?

@Rikani · 15.09.2011, 18:02

Можно поизвращаться, например так.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
body {
position: relative;
padding: 1px 0;
}
#container {
width: 450px;
margin: 100px auto 0;
}
#link {
position: absolute;
top: 0;
}
#img:hover img {
width: X;
height: Y;
}

HTML5
1
2
3
4
5
<div id="container">
    <div id="img"><img src="img" width="x" height="y" alt="Картинка" />
        <div id="link"><a href="#">Ссылка</a></div>
    </div>
</div>

Правда вложенность немного не такая как вы описали.

Vovan-VE · 15.09.2011, 18:04

Если :hover на весь контейнер, то не проблема:

CSS
1
#conteiner:hover #id1 img {width:450px;}

А уж если именно на ссылку или #id2, то тут уже сложнее.

@Noin · 15.09.2011, 18:07 **[ТС]**

Сообщение от Rikani

Можно поизвращаться, например так.

Я уже начинаю бояться что это единственный вариант на CSS, хотя изменять вложенность нельзя...

Vovan-VE · 15.09.2011, 18:10

Сообщение от Noin

хотя изменять вложенность нельзя...

Если правильно понял, структура такая: ?

HTML5
1
2
3
4
5
6
7
8
<div id="container">
    <div id="id1">
        <img />
    </div>
    <div id="id2">
        <a href="">link</a>
    </div>
</div>

@Noin · 15.09.2011, 18:23 **[ТС]**

да, именно такая

Добавлено через 9 минут

Сообщение от Vovan-VE

А уж если именно на ссылку или #id2, то тут уже сложнее.

Вот как раз надо именно на ссылку...

Vovan-VE · 15.09.2011, 18:25

Сообщение от Noin

хотя изменять вложенность нельзя...

А поменять местами id1 и id2 можно?

@Noin · 15.09.2011, 18:31 **[ТС]**

Сообщение от Vovan-VE

А поменять местами id1 и id2 можно?

Можно, а есть разница? (главное чтобы справа была ссылка, слева - картинка). Если как-то поможет - сам сайт: http://filmoff.site90.com/

Vovan-VE · 15.09.2011, 19:27

Noin, Не, с такой структурой Вы далеко не уедете. Если бы сделали 3 строки вместо 2 столбцов, то проблемы бы такой не было.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="container">
    <div class="item">
        <div class="pic"><img /></div>
        <div class="desc">
            <h2><a href="">Foo bar</a></h2>
            <p>Lorem ipsum dolor</p>
        </div>
        <div class="clear"></div>
    </div>
    <div class="item">
        <div class="pic"><img /></div>
        <div class="desc">
            <h2><a href="">Baz lol</a></h2>
            <p>Lorem ipsum dolor</p>
        </div>
        <div class="clear"></div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
.clear {clear:both; float:none; font-size:0; height:0;}
#container {border-top:#ccc solid 1px;}
#container .item {border-bottom:#ccc solid 1px; color:#999;}
#container .item .pic {width:50%; float:left; border-right:#ccc solid 1px; min-height:100px;}
#container .item .desc {margin-left:50%; border-left:#ccc solid 1px; padding:10px;}
#container .item .pic img {width:400px;}
#container .item:hover {color:#666;}
#container .item:hover .pic img {width:450px;}

@Noin · 15.09.2011, 20:23 **[ТС]**

Ясно, спасибо за помощь, буду переделывать...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Noin 0 / 0 / 0 Регистрация: 31.12.2009 Сообщений: 22

	Увеличение картинки при наведении на ссылку 15.09.2011, 17:09. Показов 9110. Ответов 11 Метки нет (Все метки) Добрый день! Ситуация такая: есть два div'а (путь будут id = 1 и id = 2) внутри третьего (id = conteiner). Внутри дива 1 - картинка (тег img), внутри дива 2 - ссылка. Возможно на CSS сделать так, чтобы при наведении на ссылку (например hover) размер картинки изменялся? Или без JS не обойтись? 0

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	15.09.2011, 17:50
	Noin, А как Вы себе представляете увеличение картинки? У Вас их две - большая и маленькая? 0

@Noin 0 / 0 / 0 Регистрация: 31.12.2009 Сообщений: 22
	15.09.2011, 20:23 [ТС]
	Ясно, спасибо за помощь, буду переделывать... 0