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

Возможно Вас также заинтересует:

Убираем с главной страницы и RSS записи рубрики

Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.

Хлебные крошки на сайте wordpress

Хлебные крошки на сайте - что это и как сделать?

Как сделать тень у текста за 5 минут

Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста.

Как сделать кнопку скачать с помощью кода css

Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.

Как сделать кнопки вверх вниз для сайта

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью 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 и у него что-то не отобразится. Для таких пользователей я вывожу сообщение, что им пора отказаться от мусора и перейти на нормальный, человеческий браузер.

На этом все, спасибо за внимание. 🙂