Приближение при наведении css. Плавное увеличение изображения при наведении на чистом CSS3. Как установить гаджет «Плавное увеличение картинки при наведении курсора» в Blogger

Способ увеличения изображения по клику похож на самый первый способ увеличения при наведении, только вместо onmouseover мы будем использовать onclick

Результат:

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

В следующем варианте увеличения изображения на сайте по клику мы будем использовать :

.click {width: ширина изображения в уменьшенном виде в px; cursor:pointer; display:inline;}.click:focus {width: ширина оригинального изображения в px (или auto); z-index:100;}

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

Результат:

Еще один вариант с использованием — увеличение изображения по клику поверх текста. Здесь используем вот такой код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.blokimg {position: relative;} .overlay{ display: none; height: auto; position: absolute; width: auto; z-index: 999; } .overlay .overlay_container{ display: table-cell; vertical-align: middle; } .overlay_container img{ background-color: green; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .overlay:target { display: table; }

.blokimg {position: relative;}.overlay{ display: none; height: auto; position: absolute; width: auto; z-index: 999;}.overlay .overlay_container{ display: table-cell; vertical-align: middle;}.overlay_container img{ background-color: green; padding: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}.overlay:target { display: table;}

Мы рассмотрели несколько вариантов увеличения изображения на сайте : от простейших до чуть более сложных с использованием html и . Используйте любой из них на своих сайтах и без дополнительных скриптов.

Здравствуйте, дорогие читатели. Думала, я думала и решила написать статью как красиво увеличить фотографии при наведении на нее курсором мышки.

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

Блогер я новенький, молодой, начинающий. Офисными программами пользоваться практически не умела, не говоря уже о фотошопе. Блог создала, а оказалось что учиться нужно было с самых низов. Чайник чайником. Все что я умела это сделать скриншот в программе Paint.

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

Эффект плавного увеличения картинок будет у всех изображений в блоге. Картинки не увеличиваются на весь экран, а плавно выдвигаются и оживают. Настоящий 3Д эффект.

Код устанавливается как обычный гаджет HTML/ JavaScript в любом месте. Статью « » можно почитать в моем блоге.

.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;padding: 8px;background: #ffffff;border: 1px solid #d0d0d0;-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);box-shadow: 0 0 20px rgba(0, 0, 0, .2);-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);background: #ffffff;border: 1px solid #cccccc;text-decoration: none;text-shadow: none;-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}

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

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

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

Таблицу создали, путь прописали, теперь подключаем файл 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 */ }

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

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

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

Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.