Boa tarde, galera. Eu tive muita dificuldade até aprender a fazer galeria, eu vi em uma vídeo-aula no YouTube que faz somente com HTML e CSS, copiei o código e deu certo, mas quando eu tento migrar para o mobile, sempre dá erro, as fotos ficam em cima da ul que tem as fotos para clicar para abrir, não consigo deixar ela centralizada com distância do top, tento deixar a imagem sem escapar com o img-fluid, mas mesmo assim, não vai. Tá bem difícil. Quem puder me ajudar, vou agradecer eternamente!
Segue o arquivo HTML com o CSS:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
width: 880px;
list-style: none;
display: flex;
margin: 10% auto;
}
.min {
width: 200%;
padding: 10%;
}
.lbox {
visibility: hidden;
opacity: 0;
}
.lbox:target {
opacity: 1;
visibility: visible;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(10,10,10,.7);
position: fixed;
}
.box_img {
width: 1000px;
margin: 150px auto;
}
.btn {
color: #fff;
font-family: "Arial";
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: 2%;
}
.box_img img{
opacity: 0;
}
.lbox:target .box_img img{
opacity: 1;
transition: opacity .4s linear;
}
</style>
<ul>
<li><a href="#img1"><img src="img/01.jpg" class="min img-fluid"></a></li>
<li><a href="#img2"><img src="img/02.jpg" class="min img-fluid"></a></li>
<li><a href="#img3"><img src="img/03.jpg" class="min img-fluid"></a></li>
<li><a href="#img4"><img src="img/04.jpg" class="min img-fluid"></a></li>
</ul>
