Многие публикации содержат помимо текста - картинки, графики всевозможные, выполненные виде превьюшек. Для более детального ознакомления с графикой придумано много способов и основном для этих целей юзается JavaScript, зачастую не мерянных оъемов.

Автор сего блога ни разу не программист и ему проще сваять нечто подобное на чистом html и css.

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

html

<div class="clicimg">
  <img tabindex="1" src="XXX.xxx">
  <dl>
    <dt></dt>
    <dd><img src="XXX.xxx"></dd>
  </dl>
</div>

css

.clicimg {margin:10px 25px 0 20px;}
.clicimg img {
  border:none;cursor:pointer;
  display:block;outline:0;width:200px;height:auto;
}
.clicimg dl {display:none;}
.clicimg dl dd {
  background:#ccc;cursor:pointer;position:fixed;
  top:5%;bottom:5%;left:20%;right:20%;z-index:100;
  vertical-align:middle;width:600px;text-align:center;
}
.clicimg dl img {
  border:#ccc 1px solid;margin:4px auto;width:470px;height:auto;
}
.clicimg dt {
  background:#000;opacity:0.4;filter:alpha(opacity=40);
  position:fixed;top:0;left:0;z-index:1;width:100%;height:100%;
}
.clicimg :focus + dl,
.clicimg :active + dl {display:block;}
.clicimg dl:hover {display:block\0/;}

Какой-то текст

Много текста...

Пояснений ни к html-коду, ни к стилям не предусмотрено, все достаточно очевидно и прозрачно. Настройки параметров, как в исходном состоянии, так и во всплывающем слое достаточно просты и обладают соответствующей гибкостью для любой разметки web-страницы.

Есть проблема центрирования картинки по вертикали во всплывающем слое, но предложенное решение лишь только демонстрация возможностей "Каскадных таблиц стилей", позволяющих не использовать JavaScript без необходимости и может пригодиться всем тем, кто далек от программирования или владеет им на уровне метода "научного тыка" :)

Все работоспособно в современных браузерах.

В IE8 после клика на любую точку всплывающего слоя, необходимо вынести курсор мыши за пределы рабочей области окна браузера.

IE6(7) отдыхают :)

Демо-пример

К плюсам можно отнести отвязку от движка CMS.

Может быть актуальным для Gold Shop Lasto при оформлении лотов магазина насыщенных графикой. Простое копирование html-конструкции в тело лота и размещение стилей в оснофном файле стилей во многом упростит работу web-мастера по предоставлению более детальной информации о товаре.