Плавное увеличение картинки при наведении для Blogger. Увеличение изображения, с помощью CSS Css эффект увеличения при наведении
Всем привет! Долго искал простой способ плавно увеличить картинку при наведении на нее. Большинство способов описанных в интернете предлагают воспользоваться jQuery и т. п., что на мой взгляд немного излишне. Есть достаточно изящное решение с помощью CSS3 .
HTML
Для начало необходимо подготовить html разметку:
Подготавливаем изображения
Каждую картинку мы обернули в div который имеет класс zoom_img
CSS
Перейдем к стилям, для начала класс zoom_img:
Zoom_img { overflow:hidden; width:390px; height:244px; }
Размер блока должен быть равен размеру изображения, и необходимо добавить overflow:hidden; что бы ничего не выходило за размер блока, об этом чуть ниже.
Zoom_img img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .zoom_img img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
С помощью параметра transition и transform в CSS3 происходит анимация. Время анимации 1 секунда. scale(1.1) – указывает что картинка должна увеличится в 1.1 раза, если необходимо увеличить в два раза, необходимо поставить 2.
И вот тут то необходимо вернуться к параметру overflow:hidden; в классе.zoom_img. За счет того что за рамки div’а ничего не выходит, создается эффект что картинка приближается, если overflow:hidden; убрать, будет видно что картинка увеличивается в размерах.
На этом на сегодня все.
Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.
И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.
Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.
Плавное увеличение картинки при наведении только на CSS3.
Html
Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.
Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.
CSS
А вот как выглядят стили:
Image { overflow:hidden; width: 380px; height:250px; }
Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока.image делаем такого же размера как и картинка.
И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.
Теперь задаём правила для самих изображений:
Image img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .image img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
Анимация происходит с помощью параметра в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.
В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.
Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.
Для того чтобы организовать такое увеличение, я предлагаю два способа. Оба на чистом CSS
, без использования JavaScript
. Первый способ увеличивает блок или картинку, в зависимости к чему Вы собираетесь применить данный метод, без влияния на остальные элементы страницы. Он как бы увеличивается поверх остальных. Для того чтобы организовать такое плавное увеличение, нужно:
1. Определится какой элемент будет. В нашем случаи это будет блок с классом block
2. Выводим его в нужном месте html кода нашего сайта
В файле стилей присваиваем ему следующие параметры:
Block{ width:150px; height:150px; background:#f30; display: block; opacity: 1; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; } .block:hover { -webkit-transform: scale(1.2,1.2); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 550ms; -moz-transform: scale(1.2,1.2); -moz-transition-timing-function: ease-out; -moz-transition-duration: 550ms; }
Можно проверять готовый результат. Ширину, Высоту, фон и другие параметры задаем какие угодно, главное указать правильно параметры -transform
- отвечающий за размер увеличения, причем просто в блоке его трогать не надо, он по умолчанию 1 - исходный размер, а вот при свойстве :hover
мы его меняем на нужное, до какого размера будет увеличение, в данном случаи 1.2.
Конечно же Вы можете изменить наоборот, допустим если Вам нужно плавное уменьшение при наведении, тут никто не запретит Вам этого сделать.
Следующее свойство - это -transition
, отвечающее за скорость анимации в миллисекундах. Если его не использовать, все будет резко увеличиваться и уменьшаться. В данном примере значение этого параметра - 550ms
.
Второй способ немного отличается от первого. Его анимация, увеличение происходит с влиянием на другие блоки и элементы страницы. При увеличении он как бы отодвигает их в стороны. Тем не менее, данный способ, тоже применяется и многим именно он и понадобится для решения конкретной поставленной задачи.
И так что же нам нужно сделать для того, чтобы организовать такое плавное увеличение при наведении?
1. Как и в первом примере определяем блок с классом уже block2
2. Опять же выводим в нужном месте
И присваиваем ему стили:
Block2{ width: 150px; height: 150px; background:#390; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .block2:hover { width: 200px; height: 200px; }
В данном случаи, мы просто изменяем размер блока в пикселях и добавляем свойство -transition , которое делает плавным увеличение. В отличии от первого способа, мы указываем время анимации не в миллисекундах, а в секундах. На примере - это 2 секунды. Вот такими не хитрыми способами можно сделать плавное увеличение не прибегая к использованию скриптов. Можно обойтись чистым СSS.
Старые версии браузеров, могут не понять что от них хотят, поэтому смотрите сами. Лично я не обращаю внимания и не забиваю голову плохим с тем, что возможно, 1 из миллиона зайдет на мой сайт с древнего убогого Internet Explorer и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.
На этом все, спасибо за внимание. 🙂
Каскадные таблицы стилей (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;
}
Если поместим несколько блочных элементов относительно друг друга, то получим следующее изображение.
Итак, мы достигли желаемого результата.