Search the Community

Доброго дня: имеем конструкцию типа: 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