Увеличение изображения, блока при наведении. Плавное увеличение картинки при наведении для Blogger Увеличение изображение при наведении курсора
Изображения на сайтах встречаются довольно часто и при этом они бывают больших размеров, но дизайны сайтов далеко не всегда позволяет разместить её в полном формате. Поэтому нужно придумать способ, который бы позволял увеличивать их.
Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.
1. Увеличение изображения через ссылкуПояснение к примеру:
- - для того, чтобы ссылка не передавала вес изображению;
- target="_blank" - изображение откроется в новой вкладке.
Последний параметр довольно важен, поскольку зачастую из-за неопытности пользователя может возникнуть следующая ситуация: открыв страницу с картинкой, он не знает как вернутся назад и поэтому просто закрывает вкладку, а значит полностью покидает сайт. Прописав последний параметр, мы его подстраховываем от такого случая, ведь у него останется открыта начальная страница.
Пример работы:
Несмотря на простоту применения, этот способ является далеко не лучшим, поскольку для увеличения изображения приходится открывать новую страницу, но зато таким методом можно просматривать изображения любых размеров. Так что делаем вывод: если необходимо увеличить изображения очень большого размера, то это единственный верный способ сделать это.
2. Автоматическое увеличение изображение при наведении курсораНазвание способа четко отражает его суть: при наведении курсора мышки на изображение оно автоматически зуммируется. Реализация метода элементарная, но опять-таки этот способ мне не нравится тем, что невозможно просто провести курсор через изображение. Ведь оно всегда будет увеличиваться - это может начать раздражать пользователя.
Следующий код реализует возможность автоматического зуммирования при наведении курсора:
img.zoom { cursor : pointer ; max-width : 150px ; } img.zoom:hover { max-width : none ; }Пояснения к примеру:
- img.zoom {max-width: 150px } - задает ширину изображения до увеличения;
- img.zoom:hover {max-width: none } - задает ширину изображения после увеличения (параметр none означает, что ограничение на максимальный размер отсутствует);
Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:
3.1. Увеличение при активном фокусеПосле клика мышкой на изображение оно увеличивается, однако из-за этого съезжает текст вниз, поэтому этот способ далеко не лучший. Приведем пример кода:
.foc { width : 150px ; cursor :pointer ; display :inline ; } .foc:focus { width : auto ; z-index : 100 ; }Как это выглядит на странице:
3.2. Увеличение изображения поверх страницыНиже приведен код для реализации этого метода
.blokimg { position : relative ; } .overlay { display : none ; height : auto ; left : -15% ; position : absolute ; top : -50% ; width : auto ; z-index : 999 ; } .overlay .overlay_container { display : table-cell ; vertical-align : middle ; } .overlay_container img { background-color : #AB5 ; padding : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; } .overlay:target { display : table ; }Как это выглядит на странице:
Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются "лайт" способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.
3.3. Красивое увеличениеДанный метод является самым красивым и удобным на мой взгляд. Для его подключения придется немного повозиться с добавление различных скриптов, поэтому для реализации рассмотрим пошаговую установку:
В архиве будет одна папка содержащая изображение, два файла.js и один.css.
2) Добавьте эти файлы к себе на сайт так, как они есть в архиве (т.е. папка imgs должна лежать в директории где будут файлы.js и.css).
3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:
(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box.getScripts("simplebox_js","simplebox.js",function(){ simplebox.init(); for(i=0,l=els.length;iПримечание
Вместо адреса меньшей копии изображения можно прописать адрес основного изображения, но при этом применить атрибут width, в котором указать небольшую ширину (читайте подробнее о ).
Как это выглядит на странице.
Здравствуйте, дорогие читатели. Думала, я думала и решила написать статью как красиво увеличить фотографии при наведении на нее курсором мышки.
Радости моей не было предела, и не потому что интересная фишка, и не потому что детство в одном месте играет:) Хочу сказать, что такого эффекта я не ожидала.
Блогер я новенький, молодой, начинающий. Офисными программами пользоваться практически не умела, не говоря уже о фотошопе. Блог создала, а оказалось что учиться нужно было с самых низов. Чайник чайником. Все что я умела это сделать скриншот в программе Paint.
Смею заметить, что смотреть на мои скриншоты без слез было нельзя. Но неожиданно, когда экспериментировала и добавила гаджет в блог, мои фотографии заиграли, засияли, засверкали ярким цветом, они словно ожили и начали другую новую жизнь, в них добавилось контрастность.
Эффект плавного увеличения картинок будет у всех изображений в блоге. Картинки не увеличиваются на весь экран, а плавно выдвигаются и оживают. Настоящий 3Д эффект.
Как установить гаджет «Плавное увеличение картинки при наведении курсора» в Blogger Плавное увеличение картинки при наведении курсора мышиКод устанавливается как обычный гаджет 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. Увеличение изображения, внутри блока.Для того что бы мы с вами понимали друг друга, о чём идёт речь, рекомендую вам нажать на ссылку «Пример №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 */ }
Сохраняем, обновляем страницу в браузере и сморим. Вот теперь всё отлично, плавно, медленно красиво, наша картинка выползает внутри блока таблицы.
Пример №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», в низу страницы. Для того что бы получить ссылку, на скачивание с «Яндекс Диска», необходимо сделать клик, в блоке ниже, по иконки социальной сети, в которой вы зарегистрированы, или авторизоваться (пройдя регистрацию) на нашем сайте!
Эффект увеличения изображения при наведении курсора мыши известен многим. Но как сделать так, чтобы увеличивалось только фоновое изображение (background-image) без увеличения основного содержимого блочного элемента?
Содадим блочный элемент с шириной 340 точек, а высотой 230 точек.
Для него укажем стиль:
Vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}
Выравниваем по левому краю - float:left. Также указываем свойство overflow со значением hidden для того, чтобы фоновое изображение не выходило за область нашего блока.
На следующем этапе помещаем содержимое в наш блочный элемент:
Текст 1
Vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}
Указываем цвет текста для абзацев в блочном элементе - color со значением #da291c. Также указываем на то, что текст будет полужирный с размером (font-size) 16 пикселей и междустрочным интервалом (line-height) в 21 пиксель.
Стиль "red_bl" добавит красивый горизонтальный элемент красного цвета в наш блочный контейнер. Ширина 30 точек, высота 6 точек, цвет такой же как и у текста.
Также добавляем стиль для внутреннего блока:
Vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}
Указываем относительное положение внутреннего блока с внутренними отступами слева 45 точек и сверху 40 точек.
Добавляем фоновое изображение background-image:
Стиль для него выглядит следующим образом:
Child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Свойство transition для разных браузеров используется для того, чтобы эффект увеличения изображения фона при наведении происходил плавно в течении 50 миллисекунд. Ширину и высоту указываем равной 100%. Также позицию фона (background-position) ставим в центре и шасштабируем изображение (background-size) по ширине и высоте блока.
Vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Для этого используется свойством transform cсо значением scale. Увеличение производим на 20% от исходного.
Ну и подгружаем сам фон:
Bg-1 {background-image: url("/userf_fs/stati/fon_sh.jpg");margin-top: -59px;}
Так как блочный элемент с фоновым изображением находится ниже нашего текста, то его необходимо поднять. Для этого используем отрицательное значение для свойства margin-top.
Итак, html код выглядит следующим образом:
Текст 1
А css следующим образом:
Vozm {
width:340px;
height:230px;
float:left;
overflow: hidden;
}
.child {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.vozm:hover .child,
.vozm:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.vozm p {
color:#da291c;
font-weight:bold;
font-size:16px;
line-height:21px;
}
.vozm .red_bl {
width:30px;
height:6px;
background-color:#da291c;
}
..jpg");margin-top: -59px;}
.vposf {
position:relative;
z-index:9999;
left:45px;
top:40px;
}
Если поместим несколько блочных элементов относительно друг друга, то получим следующее изображение.
Итак, мы достигли желаемого результата.
