Увеличение изображения, с помощью CSS

Каскадные таблицы стилей (css), не стоят на месте. Новые правила отображения и вывода на экран информации, порой способны заменить работу целого «Джава скрипта» (Java Script). При этом размер кода просто поражает своей минимизацией, а сам эффект удивляет. Сегодня мы и поговорим, об одной такой возможности, подробно разобрав парочку примеров.

Пример №1. Увеличение изображения, внутри блока.

Для того что бы мы с вами понимали друг друга, о чём идёт речь, рекомендую вам нажать на ссылку «Пример №1», в конце статьи, и открыв его продолжить разговор. На самом деле, наверное, 98% кода HTML и CSS мне пришлось написать, для визуального отображения страницы, и всего лишь 2%, а может и меньше потребовалось, на то чтобы воплотить, в жизнь то о чём пойдёт речь.

 И так обращаем внимание на первый пример. Здесь при наведении курсора, картинка плавно начинает увеличиваться внутри блока. Данным блоком может быть элементами с  тегами <div> как в моём случае, также это может быть и обычная таблица. Тут всё очень просто создаёте, к примеру, таблицу с фиксированной шириной  и прописываете путь к картинке, внутри тегов <td> </td>.

<table id="table" >
<tr>
            <td>
<img src="img1.jpg" />
            </td>
</tr>
</table>

Таблицу создали, путь прописали, теперь подключаем файл 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. Простое увеличение изображения.

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

Далее давайте скопируем таблицу, вставим её ниже и назначим новый идентификатор <tableid="table2" >.  Дальше копируем все стили в таблице, вставляем их ниже с новым идентификатором: #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», в низу страницы. Для того что бы получить ссылку, на скачивание с «Яндекс Диска», необходимо сделать клик, в блоке ниже, по иконки социальной сети, в которой вы зарегистрированы, или авторизоваться (пройдя регистрацию) на нашем сайте!

Скачать БЕСПЛАТНО!

Смотреть пример №1