It is necessary that when you click on the picture (a smaller version) on the screen appeared in the center of its larger version. The problem is that if there are a lot of pictures and the picture opens at the bottom, then when you close the picture, the page goes up. How can this be realized without a transition. I was advised to use the checkbox , but I do not really understand how to do it through them.

 .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>

  • your example works fine for you, but if you want steeper then here's an example and not bad fancybox.net - user33274
  • My example works well, but I have already described the problem above: when there are a lot of pictures and the picture opens to full screen, then you go to the top of the page and I need to get rid of it somehow. Your example is built thanks to jQuery, and I need pure css - Tyler Maning

2 answers 2

If CSS is fundamentally your use and the markup structure is like in your example, then instead of the: target pseudo-class on the block itself, you can use the: focus pseudo-class on the link that click, and make the link following it look like this:

a:focus + .full { display: block; }

This will eliminate scrolling up. JSFiddle example

PS But it is better, in my opinion, for full modal windows to use JS

    You can use ready-made solutions, for example, the highslide.js library. It has a MIT license and is written in javascript without using Jquery. Just connects:

     <script src="/highslide.js" type="text/javascript"></script> <link href="/highslide.css" rel="stylesheet" property="stylesheet" /> <script type="text/javascript"> hs.graphicsDir = '/graphics/'; </script>

    where / graphics / is the path to the graphic components supplied in the distribution.

    Used in this way:

     <a href="/images/image_big.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="/images/image_small.jpg" /> </a>

    Demo

    Instructions in Russian .

    • If you are offering a library, the description should be right in the answer. One link is not enough for a detailed answer. - 0xdb
    • @ 0xdb, corrected. - Max