CSS 라이트 박스에서 이미지 확대하기

Question

CSS의 초보자로서, 아직 학습 단계에 있으므로, 나와 함께하시기 바랍니다. 라이트 박스가 CSS로 구성되어 있고, 현재 표시되는 것보다 큰 이미지 (라이트 박스 내의 이미지, 메인 페이지의 축소판 이미지가 아닌)를 생성하고 싶습니다. 그러나 이것을 구현하는 방법을 생각할 수 없습니다!

라이브 웹 사이트 : http://contractoptions.com/gallery2.html

HTML :

<ul class="gallery"> 
<li> 
    <a href="#img1"><img src="thumb-01.jpg" alt="Image 1 Thumb"></a> 
    <article id="img1"> 
     <figure> 
      <a href="#img2"><img src="img01.jpg" alt="Image 1"></a> 
     </figure> 
     <nav> 
      <a class="close" href="#close">Close</a> 
      <a class="arrow prev" href="#img25">Previous</a> 
    <a class="arrow next" href="#img2">Next</a> 
     </nav> 
    </article> 
</li> 

CSS :

/* ----- 갤러리 페이지 ----- */

.container { 
width: 110%; 
padding: 0 4%; 
} 

h1 { 
    font-weight: normal; 
    font-style: italic; 
    text-align: center; 
    margin: 5px 0 20px; 
} 

figure { 
    margin: 0; 
    height: 50% 
} 

ul { 
    list-style: none; 
    padding: 0; 
} 

a img { 
    border: none; 
} 

.gallery { 
    max-width: 700px; 
    padding: 15px; 
    background: #666; 
    border-radius: 10px; 
    margin: 0 auto; 
    border: 15px #98b277; 
    box-shadow: 0 0 20px rgba(0, 0, 0, .5); 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.gallery:after { 
    content: ""; 
    display: block; 
    clear: both; 
} 

    .gallery li { 
     float: right; 
     width: 18%; 
     margin: 1%; 
    } 

     .gallery li > a { 
      float: right; 
      width: 100%; 
      -webkit-filter: grayscale(.5) sepia(.8); 
      -webkit-transition: .5s; 
      transition: .5s; 
      position: relative; 
      -webkit-transform: translateZ(0); 
     } 

      .gallery li > a img { 
       max-width: 100%; 
       float: right; 
       display: block; 
       box-shadow: 0 0 5px rgba(0, 0, 0, .3); 
       -webkit-transition: .5s; 
       transition: .5s; 
      } 

      .gallery li > a:hover { 
       -webkit-filter: grayscale(0) sepia(0); 
       z-index: 1; 
      } 

      .gallery li > a img:hover { 
       -webkit-transform: scale(1.4); 
       -ms-transform: scale(1.4); 
       transform: scale(1.4); 
       box-shadow: 0 0 15px rgba(0, 0, 0, .8); 
      } 

     .gallery article { 
      width: 0; 
      height: 0; 
      overflow: hidden; 
      position: fixed; 
      top: 0; 
      left: 0; 
     } 

     .gallery article:target { 
      width: 100%; 
      height: 100%; 
      padding: 100px 0; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      margin: 0; 
      text-align: center; 
      background: rgba(0, 0, 0, .7); 
      z-index: 1000; 
     }  

      .gallery article figure { 
       height: 100%; 
      } 

      .gallery article img { 
       opacity: 0; 
       -webkit-transition: .7s; 
       transition: .7s; 
       border: 10px solid #fff; 
       max-height: 100%; 
       max-width: 100%; 
       -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       box-sizing: border-box; 
       box-shadow: 0 0 20px rgba(0, 0, 0, .5); 
      } 

      .gallery article:target img { 
       opacity: 1; 
      } 

      .gallery figcaption { 
       background: rgba(250, 250, 250, .1); 
       padding: 5px 10px; 
       font-size: 1.3em; 
       font-style: italic; 
       color: #999; 
       margin-top: 20px; 
      } 

       article .close { 
        position: absolute; 
        left: 50%; 
        top: 40px; 
        margin-left: -50px; 
        width: 100px; 
        background: rgba(250, 250, 250, .9); 
        color: #333; 
        border-radius: 15px; 
        text-decoration: none; 
        padding: 6px 6px 6px 25px; 
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box; 
        text-transform: uppercase; 
        -webkit-transition: .5s; 
        transition: .5s; 
       } 

        article .close:before { 
         content: "X"; 
         color: #fff; 
         font-family: Arial; 
         font-weight: bold; 
         position: absolute; 
         padding-top: 3px; 
         top: 3px; 
         left: 5px; 
         width: 24px; 
         height: 21px; 
         background: #666; 
         border-radius: 50%; 
        } 

        article .close:hover { 
         background: #fff; 
        } 

       article .arrow { 
        position: absolute; 
        top: 250px; 
        width: 0; 
        height: 0; 
        border-top: 40px solid transparent; 
        border-bottom: 40px solid transparent; 
        text-indent: -9999px; 
        -webkit-transition: .4s; 
        transition: .4s; 
       } 

       article .prev { 
        left: 50%; 
        margin-left: -35%; 
        border-right: 60px solid rgba(250, 250, 250, .1); 
       } 

       article .prev:hover { 
        border-right-color: rgba(250, 250, 250, .2); 
       } 

       article .next { 
        right: 50%; 
        margin-right: -35%; 
        border-left: 60px solid rgba(250, 250, 250, .1); 
       } 

       article .next:hover { 
        border-left-color: rgba(250, 250, 250, .2); 
       } 


@media screen and (max-width:1100px) { 

article .arrow { 
    top: 36px; 
    border-top: 20px solid transparent; 
    border-bottom: 20px solid transparent; 
} 

article .prev { 
    margin-left: -130px; 
    border-right: 40px solid rgba(250, 250, 250, .3); 
} 

article .next { 
    margin-right: -130px; 
    border-left: 40px solid rgba(250, 250, 250, .3); 
} 

} 

@media screen and (max-width:600px) { 

h1 { 
    font-size: 1.4em; 
} 

.gallery li { 
    width: 23%; 
} 

} 

@media screen and (max-width:450px) { 

h1 { 
    font-size: 1.2em; 
} 

.gallery li { 
    width: 31%; 
} 

} 

@media screen and (max-width:350px) { 

h1 { 
    font-size: 1.2em; 
} 

.gallery li { 
    width: 48%; 
} 

} 

Answer 1

다음에 대해 빠른 Codepen을 작성했습니다. 당신. 일부 자리 표시 자 이미지를 연결하기 만하면 어떤 크기의 이미지를 사용하든 CSS에 의해 제한되지 않습니다. 나의 제안? 단순히 더 큰 이미지를 업로드하십시오. 내 설정으로 주변에 바이올린,과 같이 placehold.it 이미지를 구성합니다

<img src="http://placehold.it/200x200"> 

200x200 당신이 원하는대로 크기가 될 수 있습니다.

EDITED UPDATE는 여기에서 다음과

는 처음에, 난 당신이 lightboxed 이미지의 크기를 증가하고 싶었다 생각했다. 하지만 지금은 당신이 아마 당신의 CSS에서이 선언에 의해 제약 된 갤러리에서 이미지의 크기에 대해 얘기 생각 :

.gallery li > a img{ 
    max-width: 100%; 
} 

따라서, 갤러리의 이미지는 과거의 성장을 할 수 없습니다 (100) 부모의 폭

Answer 2

당신은 앵커 페이지에서 활성화 된 CSS가있는에 따라 대상이 될 수 있다는 사실을 이용할 수있다 : 사람이 썸네일을 클릭하면

이

<figure id="image-01-in-document"> 
    <a href="#show-01-in-lightbox"> 
     <img alt="Some thumbnail" src="/_res/thumb/01.jpg" /> 
     <p>Some Thumbnail's caption.</p> 
    </a> 
</figure> 

그들이 가지고 어떤 show-01-in-lightbox의 ID가 활성화됩니다. 여기에 큰 이미지를 넣을 수 있습니다.

aside.lightbox { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 0; height: 0; 
    overflow: hidden; 
} 

aside.lightbox:target { 
    display: block; 
    width: 100%; height: 100%; 
    overflow: scroll; 
} 

기준 :

<aside class="lightbox" id="show-01-in-lightbox"> 
    <a href="#image-01-in-document"> 
     <img alt="Some big image" src="/_res/fullsize/01.jpg" /> 
     <p>Some Lightbox's caption.</p> 
    </a> 
</aside> 

우리가 필요로하는 모든 image-01-in-document 및 show-01-in-lightbox의 활성/비활성 상태에 끼어 몇 가지 CSS는 다음과 같습니다 우리는 라이트에서 썸네일로 돌아 ID image-01-in-document으로 figure 사용 기본 라이트 박스 이미지는 숨겨져 있습니다. 그러나 미리보기 이미지를 클릭하면 aside.lightbox:target이 활성화되고 라이트 박스 이미지가 갑자기 나타납니다. 전환을 추가 할 수 있습니다. 문서 끝 부분에있는 라이트 박스 이미지 각각을위한 호스트가 필요합니다.

적어도 이것이 라이트 박스 전용 CSS 해석입니다.