как в моём случае, также это может быть и обычная таблица. Тут всё очень просто создаёте, к примеру, таблицу с фиксированной шириной и прописываете путь к картинке, внутри тегов .

Таблицу создали, путь прописали, теперь подключаем файл CSS и пишем правила. Поскольку таблиц у нас может быть много, то лучше создать идентификатор селектора, к примеру, # table .Дальше созидаем.

#table { width: 300px; height:300px; border: 1px solid #121AF0; }

Сразу хочу сказать, сто картинку, которую я выбрал, имеет размер 600х600 пикселей, так что пока она не подчиняется моим правилам размеров таблицы и растягивает её. Но это дело поправимое, правим дальше, а точнее уменьшаем картинку вот так:

#table img{ width: 300px; height:300px; }

Теперь возвращаемся назад, к идентификатору #table и дописываем следующее. Атрибут overflow (переполнение), он отвечает за удержания элементов внутри блока, если размеры последних превышают пропорции оболочки (блока, таблицы). И тут же ему задаём правила hidden (скрытый), которые говорят, мол, если хочешь показать все, то показывай только здесь и не на пиксель больше заданной пропорции. В общем, должно получиться вот так:

#table { width: 300px; height:300px; border: 1px solid #121AF0; overflow: hidden; }

Дальше нам необходимо задать, действия при наведении. За эту функцию отвечает атрибут hover (при наведении). Но тут в правилах нам необходимо transform (преобразовать) и указываем масштаб преобразования правилом scale, в скобках прописываем во сколько раз необходимо увеличить, к примеру, у нас «scale(1.3)», что означает в 1 и 3 раза. Также не забываем, что при всяких новых правилах CSS господа браузеры любят, что бы к ним обращались на Вы и индивидуально. В общем, пишем следующий код:

#table img:hover{ -webkit-transform: scale(1.3); /* для Google Chrome и Safari */ -moz-transform: scale(1.3); /* для Firefox */ -o-transform: scale(1.3); /* для браузера Опера */ }

Теперь можем сохранить всё и проверить, как это работает. Да работает. Но, к сожалению, наша картинка увеличивается очень быстро. И тут нам на помощь приходит атрибут transition (переход). Задаём ему следующие правила: all 1s ease-out, который говорит браузеру «Сделай плавный показ, в течение одной секунды 1s» и опять же таки не забываем поклониться браузерам, каждому индивидуально, что бы в итоге всё выглядело вот таким образом:

#table img{ width: 300px; height:300px; -moz-transition: all 1s ease-out; /* для Firefox */ -o-transition: all 1s ease-out; /* для браузера Опера */ -webkit-transition: all 1s ease-out; /* для Google Chrome и Safari */ }

Сохраняем, обновляем страницу в браузере и сморим. Вот теперь всё отлично, плавно, медленно красиво, наша картинка выползает внутри блока таблицы.

Пример №2. Простое увеличение изображения.

Со вторым примером, когда картинка просто увеличивается, будет всё намного проще. Давайте посмотрим, что у нас получилось в первом примере. Мы создали таблицу с идентификатором < table id =" table " > создали три группы правил стилей для него, #table, #table img , #table img:hover .

Далее давайте скопируем таблицу, вставим её ниже и назначим новый идентификатор < table id =" table 2" >. Дальше копируем все стили в таблице, вставляем их ниже с новым идентификатором: #table2, #table2 img , #table2 img:hover . Теперь из стилей ID #table2, копируем и удаляем строку overflow: hidden; и вставляем её в ID #table2 img. Если всё правильно должно получиться примерно вот так:

#table2 img{ width: 300px; height:300px; overflow: hidden; -moz-transition: all 1s ease-out; /* для Firefox */ -o-transition: all 1s ease-out; /* для браузера Опера */ -webkit-transition: all 1s ease-out; /* для Google Chrome и Safari */ }

И всё должно заработать. При желании в #table2 img:hover, изменяем значение scale(1.3) , на большее, для всех трёх браузеров и наше изображение, поменяет величину при наведении.

Ну, вот, пожалуй, и всё, обе задачи по увеличению изображения с помощью CSS реализованы. Как видите код на самом деле не большой и не сложный.

Напоминаю ещё раз, для просмотра исходного кода и примера работы, нажмите «Пример №1», в низу страницы. Для того что бы получить ссылку, на скачивание с «Яндекс Диска», необходимо сделать клик, в блоке ниже, по иконки социальной сети, в которой вы зарегистрированы, или авторизоваться (пройдя регистрацию) на нашем сайте!

Сейчас назрела потребность в красивом увеличении картинок по наведению. И никаких JS! Но пользователи старых браузеров ничего не увидят. Так им и надо.

В интернете ничего законченного не нашел, или используется position: absolute, или контент разъезжается, уступая место картинке, что не всегда приемлемо.

Итак, приступим. Все, что надо указать - задать класс картинке. Задавать будем, как всегда, отдельно для левых, отдельно для правых, и отдельно для центра. Это связано с особенностью увеличения картинки. Ведь, если картинка слева, при увеличении она должна сдвигаться вправо, иначе на мелких мониторах картинка уплывет за пределы браузера.

код HTML для картинки, выведенной слева (картинка увеличивается, подведите мышку к картинке):

И немного CSS, где указываем размер миниатюры, место расположения (слева), обтекание, а так же увеличение картинки при наведении:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; max-height: 320px ; max-width: 320px ; } img .img.left :hover{ transform: scale (2 ) translate (70px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

Почти то же самое для картинок справа

И CSS отличается только расположением миниатюры (справа) и сдвигом влево при увеличении:

img .img.right { float: right ; margin: 5px 0 5px 15px ; max-height: 320px ; max-width: 320px ; } img .img.right :hover{ transform: scale (2 ) translate (-69px , 30px ); transition: all 0 . 3s linear 0 . 3s ; }

А теперь выведем миниатюру для центра:

img .img.center { margin: 5px auto ; display: block ; max-height: 320px ; max-width: 320px ; } img .img.center :hover { transform: scale (2 ); transition: all 0 . 3s linear 0 . 3s ; }

Обобщаем CSS и добавляем красоты:

img .img.left { float: left ; margin: 5px 15px 5px 0 ; } img .img.right { float: right ; margin: 5px 0 5px 15px ; } img .img.center { margin: 5px auto ; display: block ; } img .img { max-height: 320px ; max-width: 320px ; transition: all 0 . 3s linear 0s ; z-index: 1 ; border: 1px solid #EEE ; background: #FFFFFF ; padding: 5px ; } img .img :hover { cursor: pointer ; box-shadow: 0 0 5px 5px #eee ; border: 1px solid #25A0E3 ; z-index: 10 ; transition: all 0 . 3s linear 0 . 3s ; } img .img.left :hover{ transform: scale (2 ) translate (88px , 30px ); } img .img.right :hover{ transform: scale (2 ) translate (-88px , 30px ); } img .img.center :hover { transform: scale (2 ); }

Сделал задержку увеличения картинки на 0.3с. Что бы при перемещении мышки через картинку, она не увеличивалась.