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

2013-09-18 | CSS, HTML

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

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

Лирическое отступление сделал, давайте приступать.

Увеличение изображения на сайте

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

Увеличение изображения на сайте при наведении курсора

Первый и самый наипростейший способ увеличения изображения на сайте, это добавить к свойству изображения между тегами img следующий код:

onmouseover="this.style.width='ширина оригинального изображения в px (или auto)'" onmouseout="this.style.width='ширина изображения в уменьшенном виде в px'"

То есть при одном наведении курсора изображение станет большим.

Код полностью:

<img src="http://makoveckij.ru/wp-content/uploads/2013/09/focus.jpg" style="width:100px;" onmouseover="this.style.width='431px'" onmouseout="this.style.width='100px'" />

Результат:

Следующий способ абсолютно похож на первый, только тут мы будем использовать CSS-стили:

<style type="text/css">
img.bg {
    cursor: pointer;
    max-width: 100px;  // ширина уменьшенного изображения;
  }
  img.bg:hover {
    max-width: none;
  }
</style>

<img class="bg" src="путь к изображению" />

И последний самый красивый способ увеличения при наведении с использованием CSS. Здесь мы добавим рамку и описание к большому изображению.
Код:

<style type="text/css">

/* Если изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> 
Иначе не будет работать в IE6 */

.ienlarger {
	float: left;
	clear: none; /* Можно установить left или right по необходимости */
	padding-bottom: 5px;
	padding-right: 5px;
}

.ienlarger a { 
	display:block;
	text-decoration: none;
}

.ienlarger a:hover{ 
 	position:relative;
}

.ienlarger span img {
	border: 1px solid #0099ff;
	margin-bottom: 8px;
}

.ienlarger a span {   // стили текста описания;
	position: absolute;
	display:none;
	color: #FFCC00;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; // Размер шрифта описания;
	background-color: #0000ff;
	  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.ienlarger img {
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 10px; // Большое изображение появится на 10px ниже относительно верхнего края миниатюры;
	left: 40px; // Большое изображение появится на 40px правее относительно левого края миниатюры;
	z-index: 100;
}

.resize_thumb {
	width: 100px; // Вводим нужный размер миниатюры здесь;
	height : auto;
}
</style>
<div class="ienlarger"><a href="http://makoveckij.ru/"><img src="путь к изображению" alt="thumb" 
class="resize_thumb" /><span><img src="путь к изображению" alt="оригинал" /><br />Описание изображения.</span></a></div>
</style>

Посмотреть результат

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

Увеличение изображения на сайте по клику

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

<img src="путь к изображению" style="width:100px;
border:2px solid green;" onclick="this.style.width='ширина оригинального изображения в px (или auto)'" onmouseout="this.style.width='ширина изображения в уменьшенном виде в px'" />

Результат:
Кликни, чтобы увеличить.

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

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

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

<img border="0" src="путь к изображению" class="click" tabindex="1"/>

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

Результат:

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

<style type="text/css">
.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;
}
</style>

<div class="blokimg">
<div class="overlay" id="open">
<div class="overlay_container">
<a href="#close">
<img src="путь к изображению"/>
</a>
</div>
</div>
<a href="#open">
<img style="width:ширина в px уменьшенного изображения" src="путь к изображению" />
</a>
</div>

Посмотреть результат

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

Поделиться:

Записи по теме:

52 комментария к записи "Увеличение изображения на сайте с помощью html и CSS"

Ольга от 20.09.2013 в 17:35 пишет:

Давно хотела сделать подобное увеличение изображений. Сначала попробую использовать html и CSS. А потом ещё и скриптами займусь.

Ответить ↓
- Никита от 20.09.2013 в 20:46 пишет:
  
  С использованием скриптов красивее. Только и всего, а на html и CSS проще.
  
  Ответить ↓
  - Руслан от 22.09.2013 в 14:47 пишет:
    
    Никита, а не мог бы ты написать пост в котором рассказал бы как увеличивать изображения с использованием скриптов.
    
    Ответить ↓
    - Никита от 22.09.2013 в 14:56 пишет:
      
      Я дал в этом посте ссылки на три поста, в которых написано про увеличение изображений с использованием javascript. Если данные методы не понравятся, можешь поискать на других сайтах.
      
      Ответить ↓
      - Руслан от 22.09.2013 в 15:00 пишет:
        
        Ага спасибо, нашел.
Руслан от 22.09.2013 в 14:44 пишет:

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

Ответить ↓
Нина от 24.09.2013 в 23:06 пишет:

Спасибо вам огромное, все работает. Очень помогают разобраться в скрипте ваши комментарии, это при том, что я очень далека от веб программирования и ничего кроме html никогда не использовала. Вы не любитель, вы настоящий сенсей)))

Ответить ↓
- Никита от 26.09.2013 в 00:43 пишет:
  
  Не, до сенсея мне далеко! Я еще сам учусь.
  
  Ответить ↓
Александр от 27.09.2013 в 00:46 пишет:

Спасибо! Очень классная и простая фишка, без скриптов и лишней нагрузки на сервер Спасибо!!!

Ответить ↓
- Никита от 27.09.2013 в 22:32 пишет:
  
  Да, чем меньше плагинов, тем лучше!
  
  Ответить ↓
Дмитрий от 30.09.2013 в 13:25 пишет:

Отличная статья, даже не думал что так просто всё можно сделать через код!

Ответить ↓
алексей от 10.10.2013 в 05:06 пишет:

Спасибо!!!!!!!

Ответить ↓
- Никита от 10.10.2013 в 18:22 пишет:
  
  Всегда пожалуйста!
  
  Ответить ↓
Иван от 12.11.2013 в 11:54 пишет:

второй день ищу самый простой способ сделать галерею с помощью css, везде все оч сложно много всего непонятного, Наткнулся на ваш сайт… Просто не нарадуюсь спасибо!

Ответить ↓
Иван от 12.11.2013 в 12:02 пишет:

Единственное. как сделать чтобы увеличенная картинка просто в момент увеличения поверх всего была. чтобы не сдвигала своим увеличением другие картинки

Ответить ↓
- Никита от 12.11.2013 в 17:36 пишет:
  
  Такой вариант возможен. Видел на каком-то сайте подобное решение, но не помню на каком…
  
  Ответить ↓
Василий от 17.11.2013 в 18:01 пишет:

Для меня это очень нужная информация. Только у меня не получается первым методом увеличить изображение.

Ответить ↓
- Никита от 17.11.2013 в 18:28 пишет:
  
  Попробуйте другие методы. Может получится. Может быть такое, что сам wordpress не воспринимает должным образом этот код.
  
  Ответить ↓
Роман от 28.01.2014 в 00:23 пишет:

Подскажите пожалуйста как добавить надпись в рамке под картинкой при увеличении по клику, так же как в случае с увеличением при наведении.

Ответить ↓
- Никита от 28.01.2014 в 22:53 пишет:
  
  Попробуйте поиграться со span-ом — добавить надпись и стили как и в примере с наведением.
  
  Ответить ↓
Костя от 13.03.2014 в 19:42 пишет:

У меня последний вариант увеличения картинки работает в «Opera», «Firefox». В «Internet Explorer» почему то не работает. Подскажите пожалуйста, что дописать в коде.

Ответить ↓
- Никита от 16.03.2014 в 16:34 пишет:
  
  Честно, не знаю! IE — это специфическй браузер!
  
  Ответить ↓
Vladimir от 27.05.2014 в 08:45 пишет:

Мне надо, чтоб картинка-мини стояла в левом сайтбаре. Но при увеличении она накрывает страницу с контентом (контент – справа). Все мне нравиться, но контент просвечивается сквозь увеличенную картинку – очень некрасиво! Как исправить? Спасибо!

Ответить ↓
- Никита от 28.05.2014 в 23:47 пишет:
  
  Честно, не сталкивался с этим. Не помогу!
  
  Ответить ↓
Роман от 01.06.2014 в 17:29 пишет:

Подскажите, почему не получается вывести несколько картинок на одной странице? Все миниатюры видны, но по клику на любой из них увеличивается только первая картинка. Все пути прописаны правильно.

Ответить ↓
- Никита от 01.06.2014 в 21:59 пишет:
  
  Посмотрите внимательно исходный код страницы на моем блоге, где приведен пример с несколькими миниатюрами.
  
  Ответить ↓
  - Роман от 01.06.2014 в 22:47 пишет:
    
    А какую именно страницу смотреть, киньте ссылку если не затруднит.
    
    Ответить ↓
    - Никита от 04.06.2014 в 22:49 пишет:
      
      Извините, перепутал. Нет на блоге такой страницы.
      
      Ответить ↓
      - Макс от 13.11.2014 в 16:57 пишет:
        
        Не могли бы вы подсказать, как сделать увеличение нескольких картинок, последним способом? спасибо!
      - Никита от 13.11.2014 в 18:33 пишет:
        
        Попробуйте продублировать данную конструкцию:
        <div class="blokimg"> <div class="overlay" id="open"> <div class="overlay_container"> <a href="#close"> <img src="путь к изображению"/> </a> </div> </div> <a href="#open"> <img style="width:ширина в px уменьшенного изображения" src="путь к изображению" /> </a> </div>
      - Роман от 13.11.2014 в 21:31 пишет:
        
        Все равно ничего не получается, даже продублировав. Выводится только первая картинка.
Андрей от 25.06.2014 в 21:00 пишет:

При использовании первого способа почему-то изображение увеличевается только в ширину, в высоту никак не хочет, что нужно добавить?

Ответить ↓
- Никита от 25.06.2014 в 21:25 пишет:
  
  Проверьте, не забыли ли Вы про параметр height.
  
  Ответить ↓
Азат от 02.10.2014 в 11:37 пишет:

Спасибо! Самое лучшее описание. Просмотрел несколько сайтов с подобной темой, но здесь описано и преподнесено — на уровне! Спасибо!

Ответить ↓
- Никита от 02.10.2014 в 19:48 пишет:
  
  Всегда пожалуйста!
  
  Ответить ↓
Наталья от 04.03.2015 в 13:02 пишет:

Спасибо огромное!!!!
Несказанно помогли.
Давно искала что-то простое т.к. у меня нет доступа в корневую папку сайта.
Теперь буду ваять

Ответить ↓
Алексей от 09.06.2015 в 14:52 пишет:

клик по картинке и закрытие при клике в любом месте — даже близко не работает! автор хрень какую то скопировал с других сайтов!

Ответить ↓
Александр от 21.11.2015 в 20:14 пишет:

Самый лучший вариант из всех найденных мною. Простой код, прекрасная работа.
Но есть вопрос:
Как сделать так, чтобы картинка сворачивалась при повторном клике на нее?

Ответить ↓
- Никита от 21.11.2015 в 22:20 пишет:
  
  А какой вариант именно? В статье просто несколько вариантов.
  
  Ответить ↓
  - Александр от 22.11.2015 в 11:27 пишет:
    Вот в этом варианте:
    .click {width: ширина изображения в уменьшенном виде в px; cursor:pointer; display:inline;} .click:focus {width: ширина оригинального изображения в px (или auto); z-index:100;}
    Что изменить, чтобы изображение сворачивалось при клике не в любом месте страницы, а только при клике на изображении?
    Ответить ↓
    - Никита от 22.11.2015 в 21:47 пишет:
      
      Посмотрите здесь, только через JavaScript, но практически похоже.
      
      Ответить ↓
      - Александр от 22.11.2015 в 23:07 пишет:
        
        Большое спасибо!
Сергей от 13.01.2016 в 12:25 пишет:

Спасибо! Очень помогло!

Ответить ↓
Жека от 20.01.2016 в 08:23 пишет:

Помогло спасибо админу!!!

Ответить ↓
Владимир от 19.02.2016 в 07:12 пишет:

Никита добрый день.
Картинка увеличивается но назад по клику не возвращается?

Ответить ↓
- Никита от 20.02.2016 в 21:09 пишет:
  
  К сожалению, нет.
  
  Ответить ↓
feuer81 от 08.03.2016 в 14:39 пишет:

Последний вариант очень кстати, только он с ID, а если несколько картинок на странице?

Ответить ↓
- Никита от 08.03.2016 в 18:17 пишет:
  
  Попробуйте такой вариант
  
  Ответить ↓
Татьяна от 29.03.2016 в 08:16 пишет:

Здравствуйте!
Подскажите, пожалуйста, куда и как правильно вставить код для увеличения картинки на сайте — при одном наведении курсора изображение станет большим.

Ответить ↓
- Никита от 31.03.2016 в 19:45 пишет:
  Вставляете в нужное место на странице этот код:
```
<img src="http://путь к изображению" style="width:100px;" onmouseover="this.style.width='431px'" onmouseout="this.style.width='100px'" />
```
  Ответить ↓
Владимир от 11.08.2016 в 11:27 пишет:

Здравствуйте Никита. Я вставил в свой блог ваш скрипт: http://pastebin.com/LnSNW4SJ
На странице: http://oco.su/glavnaya/servis-besplatnoy-raskrutki-sayta-na-avtomate/ чтобы картинка увеличивалась при клике на нее. Картинка увеличивается, но почему то не по центру, а смещается вверх и вправо, смотрится некрасиво. Подскажите пожалуйста, что сделать, чтобы картинка увеличивалась ровно по центру?

Ответить ↓
- Никита от 14.08.2016 в 00:09 пишет:
  
  Странно. Я посмотрел. Картинка открывается по центру, но есть небольшое смещение из-за рамки вокруг нее.
  
  Ответить ↓