When you click on the picture, it should appear in the center of the page in full size (maximum width: 1400px; height: 1000px ). It is also desirable that the rest of the background is darkened (as shown in the picture). How can this be implemented on pure css?

 .pictures { -webkit-column-count: 4; -webkit-column-gap: 0px; -moz-column-count: 5; -moz-column-gap: 0px; column-count: 4; column-gap: 0px; width: 1200px; } .pictures img { display: flex; padding: 10px; width: 270px; height: auto; } 
 <section class="pictures"> <img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"> <img src="https://static.pexels.com/photos/60163/pexels-photo-60163-large.jpeg"> <img src="https://static.pexels.com/photos/1539/vintage-technology-music-old-large.jpg"> <img src="https://static.pexels.com/photos/36092/pexels-photo-large.jpg"> <img src="https://static.pexels.com/photos/9014/car-orange-retro-large.jpg"> <img src="https://static.pexels.com/photos/2017/vintage-music-closed-shop-large.jpg"> <img src="https://static.pexels.com/photos/64687/pexels-photo-64687-large.jpeg"> <img src="https://static.pexels.com/photos/474/black-and-white-car-vehicle-vintage-large.jpg"> <img src="https://static.pexels.com/photos/5842/people-vintage-photo-memories-large.jpg"> <img src="https://static.pexels.com/photos/2884/building-vintage-bike-monument-large.jpg"> </section>

What the picture should look like

    3 answers 3

    https://jsfiddle.net/cy3vg3ea/

     .pictures { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin-bottom: -1em; } a { display: inline-block; } img { display: block; width: 100%; margin-bottom: 1em; } .full { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; padding: 8%; background: #CCC center no-repeat; background: rgba(0, 0, 0, 0.5) center no-repeat; background-size: contain; background-origin: content-box; } .full:target { display: block; } 
     <section class="pictures"> <a href="#pexels-photo-46871-large.jpeg"><img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"></a> <a id="pexels-photo-46871-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg)"></a> <a href="#pexels-photo-60163-large.jpeg"><img src="https://static.pexels.com/photos/60163/pexels-photo-60163-large.jpeg"></a> <a id="pexels-photo-60163-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/60163/pexels-photo-60163-large.jpeg)"></a> <a href="#vintage-technology-music-old-large.jpg"><img src="https://static.pexels.com/photos/1539/vintage-technology-music-old-large.jpg"></a> <a id="vintage-technology-music-old-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/1539/vintage-technology-music-old-large.jpg)"></a> <a href="#pexels-photo-large.jpg"><img src="https://static.pexels.com/photos/36092/pexels-photo-large.jpg"></a> <a id="pexels-photo-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/36092/pexels-photo-large.jpg)"></a> <a href="#car-orange-retro-large.jpg"><img src="https://static.pexels.com/photos/9014/car-orange-retro-large.jpg"></a> <a id="car-orange-retro-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/9014/car-orange-retro-large.jpg)"></a> <a href="#vintage-music-closed-shop-large.jpg"><img src="https://static.pexels.com/photos/2017/vintage-music-closed-shop-large.jpg"></a> <a id="vintage-music-closed-shop-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/2017/vintage-music-closed-shop-large.jpg)"></a> <a href="#pexels-photo-64687-large.jpeg"><img src="https://static.pexels.com/photos/64687/pexels-photo-64687-large.jpeg"></a> <a id="pexels-photo-64687-large.jpeg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/64687/pexels-photo-64687-large.jpeg)"></a> <a href="#black-and-white-car-vehicle-vintage-large.jpg"><img src="https://static.pexels.com/photos/474/black-and-white-car-vehicle-vintage-large.jpg"></a> <a id="black-and-white-car-vehicle-vintage-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/474/black-and-white-car-vehicle-vintage-large.jpg)"></a> <a href="#people-vintage-photo-memories-large.jpg"><img src="https://static.pexels.com/photos/5842/people-vintage-photo-memories-large.jpg"></a> <a id="people-vintage-photo-memories-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/5842/people-vintage-photo-memories-large.jpg)"></a> <a href="#building-vintage-bike-monument-large.jpg"><img src="https://static.pexels.com/photos/2884/building-vintage-bike-monument-large.jpg"></a> <a id="building-vintage-bike-monument-large.jpg" href="#" class="full" style="background-image:url(https://static.pexels.com/photos/2884/building-vintage-bike-monument-large.jpg)"></a> </section> 

       .foto-previews > img { padding: 10px; width: 270px; height: auto; } .fotobox { display: none; position: fixed; top: 0; left: 0; z-index: 2000; width: 100%; height: 100%; text-align: center; background: rgba(0,0,0,0.9); } .fotobox > img { max-width: 90%; max-height: 80%; border: 10px solid #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .fotobox:target { outline: none; display: block; } 
       <section class="pictures"> <a href="#foto1" class="foto-previews"> <img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"> </a> <a href="#" class="fotobox" id="foto1"> <img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"> </a> </section>

        Without js, you will need to trace the height of the screen with media requests so that the picture is always in the center of the screen, but for now, just like this:

         * { box-sizing: border-box; } .thumb { max-width: 400px; } .big-picture, .big-picture:focus { display: block; background: rgba(0,0,0,.5); position: fixed; width: 100%; height: 100%; top: 0; left: 0; text-align: center; opacity: 0; visibility: hidden; transition: 300ms; } .big-picture:target { opacity: 1; visibility: visible; } .big-picture:target img { transform: translateY(-50%) } .big-picture img { position: absolute; top: 50%; left: 0; right: 0; margin: auto; transform: translateY(-150%); max-width: 600px; width: 100%; border: 2px solid #fff; transition: 500ms; } 
         <a href="#big-picture"> <img class="thumb" src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"> </a> <a href="#" class="big-picture" id="big-picture"> <img src="https://static.pexels.com/photos/46871/pexels-photo-46871-large.jpeg"/> </a>

        • No need for media queries here. - Qwertiy ♦
        • Well, theoretically, if our pictures are always the same size, then media queries can be dubbed on small screens. Or are there other options? - NeedHate
        • one
          See my answer. In the snippet does not look very good, in js-fiddle you can do a bigger one - it's normal there. - Qwertiy ♦