css всплывающее окно с img поверх текущей страницы

[Серый_Ветер]

Доброго дня:

имеем конструкцию типа:

HTML

<section id="ph_main" class="ph_main">
<div class="ph_wrapper ph_wrapper_col1">
<div class="ph_scroll">
<ul class="ph_strip">
<li><a style="height: 160px; width: 150px;" href="/IMG/1.jpg" title="Spring1" ><img src="/IMG/icon/1.jpg" /></a></li>
<li><a style="height: 160px; width: 150px;" href="/IMG/2.jpg" title="Spring2" ><img src="/IMG/icon/2.jpg" /></a></li>
<li><a style="height: 160px; width: 150px;" href="/IMG/3.jpg" title="Spring3" ><img src="/IMG/icon/3.jpg" /></a></li>
<li><a style="height: 160px; width: 150px;" href="/IMG/4.jpg" title="Spring4" ><img src="/IMG/icon/4.jpg" /></a></li>
</ul>
</div>
</div>
</section>

CSS

.ph_wrapper {
position: relative;
background: #fff url(../images/paper.jpg) repeat center bottom;
width: 170px;
margin-top: 10px;
padding: 20px 10px 50px;
-webkit-backface-visibility: hidden;
overflow: hidden;
box-shadow:
inset 1px 0 0 3px rgba(255,255,255,0.6),
0 1px 4px rgba(0,0,0,0.3),
inset 0 0 20px rgba(0,0,0,0.05),
inset 0 -25px 40px rgba(0,0,0,0.08);
}

.ph_wrapper:before {
content: '';
position: absolute;
width: 2px;
left: 0;
top: 3px;
bottom: 3px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.ph_wrapper:after{
position: absolute;
content: '';
background: rgba(192,227,232, 0.8) url(../images/scroll.png) no-repeat center center;
width: 80px;
height: 80px;
top: 50%;
left: 50%;
margin: -75px 0 0 -35px;
border-radius: 50%;
z-index: 1000;
}

.touch .ph_wrapper:after,
.ph_wrapper:hover:after {
display: none;
}
.ph_title {
padding: 5px;
color: #374571;
font-size: 14px;
font-weight: 300;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
}

.ph_wrapper .a:focus {
outline: thin dotted;
}

.ph_wrapper .a:active, .a:hover{
outline: 0;
}

.ph_scroll {
position: relative;
height: 100%;
width: 150px;
padding-right: 30px;
overflow-y: scroll;
overflow-x: hidden;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.touch .ph_scroll {
padding-right: 0px;
}

ul.ph_strip {
padding: 0;
list-style: none;
position: relative;
margin: 0 auto;
width: inherit;
opacity: 0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.ph_wrapper:hover ul.ph_strip,
.touch .ph_wrapper ul.ph_strip{
opacity: 1;
}

ul.ph_strip li {
display: block;
width: 150px;
position: relative;
margin-bottom: 7px;
}

ul.ph_strip li a {
display: block;
}

ul.ph_strip li a:after {
position: absolute;
z-index: 999;
height: 15px;
text-align: center;
width: 120px;
left: 10px;
padding: 5px;
bottom: 10px;
background: rgba(255,255,255,0.8);
content: attr(title);
font-size: 13px;
text-shadow: 0 1px 1px rgba(255,255,255,0.9);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

ul.ph_strip a:onclick {
width: 250%; /* до такого размера мы увеличили изображение*/
height: 250%;
position: absolute;
opacity: 1; /* прозрачность стала не нужна*/
z-index: 1; /* чтобы фотография разворачивалась поверх всех изображений*/
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; /* добавляем немного красоты */
-webkit-transition-property: width, height; /* делаем «сворачивание» изображения*/
-webkit-transition-duration: 2s; /* указываем, с какой скоростью нам надо увеличить изображение*/
-webkit-transition-delay: 0.3s; /* как долго будет думать браузер, перед тем, как развернуть фотографию*/
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}

ul.ph_strip li img {
display: block;
box-shadow: 0 0 1px 1px #fff;
}


.ph_wrapper_col1 {
height: 540px;
float:left;
margin-right: 5%;
margin-left: 1%;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
/* -ms-transform: rotate(3deg);*/
transform: rotate(3deg);
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

все работает кроме вот этого:

ul.ph_strip a:onclick {
width: 250%; /* до такого размера мы увеличили изображение*/
height: 250%;
position: absolute;
opacity: 1; /* прозрачность стала не нужна*/
z-index: 1; /* чтобы фотография разворачивалась поверх всех изображений*/
-moz-box-shadow: 0 0 15px 2px #000;
-webkit-box-shadow: 0 0 15px 2px #000;
box-shadow: 0 0 15px 2px #000; /* добавляем немного красоты */
-webkit-transition-property: width, height; /* делаем «сворачивание» изображения*/
-webkit-transition-duration: 2s; /* указываем, с какой скоростью нам надо увеличить изображение*/
-webkit-transition-delay: 0.3s; /* как долго будет думать браузер, перед тем, как развернуть фотографию*/
-moz-transition-property: width, height;
-moz-transition-duration: 2s;
-moz-transition-delay: 0.3s;
-o-transition-property:width, height;
-o-transition-duration: 2s;
-o-transition-delay: 0.3s;
cursor: default;
}

также менял на focus -хоть бы хны. не меняется вообще.

как открывалось в окне, так и открывается... а хотелось бы всплывающее окно

подскажите что править надо и куда... чтобы работало...

p.s. если можно, то на css, без js/jquery

[npofopr]

a:onclick

Это вы где такое нашли?

http://bit.ly/1dNVusD

[Серый_Ветер]

Это вы где такое нашли?

а почему Вы решили что это единсвенное что там стояло?

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

использовал target/onclick/focus - не работало.

про сервис lmgtfy.com знаю не по наслышке.

вы постскриптум читаете?

если можно, то на css, без js/jquery

говорить что невозможно - не стоит.

возможно.

1. описание

1.1 пример 1

1.2 пример 2

2. описание

2.1 пример 1

3. описание

3.1 пример 1

просто у меня другое расположение объектов(фото). но вывод фото в всплывающем сообщении должен быть одинаковый...

и почему то не работает, хотя код вывода почти один и тот же...

[Серый_Ветер]

up

помогите, не могу сам решить эту проблему

[npofopr]

http://h5bp.github.io/Effeckt.css/dist/modals.html

[Серый_Ветер]

что то судя по коду... там везде js юзается....

но это на первый взгляд...

[Серый_Ветер]

без js вроде бы...

но не заводится...

вроде по мануалу...

[Серый_Ветер]

в общем сделал, тока не могу понять принцип работы...

работает если пишу так:

<a href="#x" class="overlay" id="win3"></a>

а если так:

<a href="#x" class="overlay" id="win3" />

то не работает...

в чем дело то?

[npofopr]

В том, что тег <a> закрывается http://htmlbook.ru/html/a

[Серый_Ветер]

а можно спросить и узнать, почему скролл от предыдущего элемента вылез вперед батьки?

[lev99]

проверяй свой css или код, где-то 

[npofopr]

а можно спросить и узнать, почему скролл от предыдущего элемента вылез вперед батьки?

z-index видимо выше у элемента

[swandev]

что то судя по коду... там везде js юзается....

но это на первый взгляд...

А чем вам JS не нравится?)