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

* 1-02-2014, 13:31 * A_Protasov * Комментариев: 1

Рейтинг:

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



razdacha.jpg

Просмотров: 39 076
Последние новости блога
Простая вёрстка в HTML. Урок №6.
Таблица контента и информационного поля. Поскольку в предыдущих уроках мы уже многое узнали о том, как создаются таблицы, то на данном этапе мы ускорим наш процесс обучения и рассмотрим только
Простая форма обратной связи. Часть-3.
Часть-3. На прошлых занятиях, мы разобрались, как в принципе должна выглядеть наша форма обратной связи, и даже поработали немного над её стилевым оформлением.  Теперь нам осталось создать файл
Как скрыть партнёрскую ссылку?
Партнёрская, реферальная ссылка. Именно такое названия слышат практический все вебмастера, от новичка до профессионала, начиная свой заработок в сети интернет на партнерских программах. Основная суть
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
TravisMef
  • 0

2 февраля 2014 13:25 TravisMef

Да интересненько! Хорошая тема, а главное действительно сам код CSS не большой на самом деле. И не каких скриптов не надо))

TravisMef
.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru