photo album with HTML and CSS

Question

I have a folder on the site called PHOTOS , by clicking on the folder PHOTOS I thought I’d put several < article > splitting each photo album type:

< article > album de fotos 01 < article >
< article > album de fotos 02 < article >
< article > album de fotos 03 < article >

Each album of these I’ll put more or less 10 to 15 thumbnail photos, 200px for 200px. Can someone help me so that when clicking on each photo they open in a larger size?

If possible only with html and css, more accept other suggestions as well..
There’s my code right there

<article ="album-foto01">

 <ul>

    <li id="foto01"><img src="imagem.jpg"></li>      
    <li id="foto02"><img src="imagem1.jpg"></li>         
    <li id="foto03"><img src="imagem2.jpg"></li>
    <li id="foto04"> <img src="imagem3.jpg"></li>
    <li id="foto05"> <img src="imagem4.jpg"></li>
    <li id="foto06"> <img src="imagem5.jpg"></li>

<ul/>

<ul>
    <li id="foto01"><img src="imagen.jpg"></li>      
    <li id="foto02"><img src="imagem1.jpg"></li>         
    <li id="foto03"><img src="imagem2.jpg"></li>
    <li id="foto04"> <img src="imagem3.jpg"></li>
    <li id="foto05"> <img src="imagem4.jpg"></li>
    <li id="foto06"> <img src="imagem5.jpg"></li>

<ul/>

Answer 1

Here is a very simple model that can serve as an example and for studies.

The main thing is that it uses the pseudo class :target to change the opacity of the images and show them in large size. Another thing is that it uses "anchors" to navigate between an image and another.

In the example there is a <ul> with thumbnails, and clicking on it with the :target the big image appears. (In fact what appears is a "block" with all the elements inside, large image and navigation buttons. So when you change from one image to another you’re actually also changing the navigation btns, only you don’t notice this exchange visually by being an element in the same place of the other. Only the image you understand because they are different.)

Now let’s get down to the code!

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
}
.lbox {
    visibility: hidden;
    opacity: 0;
}
ul {
    width: 800px;
    list-style: none;
    display: flex;
    margin: 100px auto;
}
.min {
    width: 200px;
    padding: 10px;
}
.lbox:target {
    opacity: 1;
    visibility: visible;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    text-align: center;
    background-color: rgba(10,10,10,0.7);
}
.box-img {
    width: 1000px;
    margin: 150px auto;
}
.btn {
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    position: absolute;
    width: 50px;
    height: 50px;
    font-size: 40px;
    text-align: center;
}
#prev {
    left: 5%;
    top: 45%;
}
#next {
    right: 5%;
    top: 45%;
}
#close {
    top: 0;
    right: 2px;
}
.box-img img {
    opacity: 0;
}

.lbox:target .box-img img {
    opacity: 1;
    transition: opacity 250ms linear;    
}

<ul>
    <li><a href="#img1"><img src="http://placecage.com/800/400" alt="" class="min"></a></li>
    <li><a href="#img2"><img src="http://fillmurray.com/800/400" alt="" class="min"></a></li>
    <li><a href="#img3"><img src="http://placecage.com/800/401" alt="" class="min"></a></li>
    <li><a href="#img4"><img src="http://fillmurray.com/800/401" alt="" class="min"></a></li>
</ul>

<div class="lbox" id="img1">
    <div class="box-img">
        <a href="#img4" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="http://placecage.com/800/400" alt="">
        <a href="#img2" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img2">
    <div class="box-img">
        <a href="#img1" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="http://fillmurray.com/800/400" alt="">
        <a href="#img3" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img3">
    <div class="box-img">
        <a href="#img2" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="http://placecage.com/800/401" alt="">
        <a href="#img4" class="btn" id="next">&#187;</a>
    </div>
</div>
<div class="lbox" id="img4">
    <div class="box-img">
        <a href="#img3" class="btn" id="prev">&#171;</a>
        <a href="#" class="btn" id="close">X</a>
        <img src="http://fillmurray.com/800/401" alt="">
        <a href="#img1" class="btn" id="next">&#187;</a>
    </div>
</div>

OBS1: Some values are in PX so it is not 100% responsive, but this you can even arrange rss

OBS2: It is not dynamic, for each image you will have to create the block .lbox new and do the "anchoring of links"

OBS3: Reference link to the example I used.