Galeria só com HTML e CSS

Front-end HTML
, ,
#1

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:

Galeria 
<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>
« X »
« X »
« X »
« X »
#2

No caso seu código não está responsível, quando digo responsível quero dizer que para diferentes tamanhos de tela, como telas de celulares, tablets, tamanhos diferentes de monitores, o layout não se adapta e você vê ele todo desfigurado, eu recomendo que você busque mais sobre como fazer um layout responsivo, no caso um layout que se adapta a todos os tipos de tela.

Segue aqui um vídeo que pode lhe ajudar a criar a galeria com html e css.

Parte 1:

www.youtube.com/watch?v=Dvq1yWmrQNU

Parte 2:

www.youtube.com/watch?v=g7d8pbEu3oM

#3

Entendi, agora que vi que não coloquei o Bootstrap, não dá pra colocar sem afetar. Mas obrigado pelos vídeos, vou ver e se houver alguma dúvida, volto a procura de ajuda!

#4

Opa! Vi os vídeos do Guanabara, mas o que eu quero seria abrir a imagem e ter pelo menos o botão de fechar a imagem, não só passar o mouse nela e ela abrir :frowning:

#5

Tipo um modal que deixa o fundo fora de foco e traz o foco para a janela ?

#6

Pode ser, tentei usar o modal do bootstrap, mas quando coloco muitas fotos, quando clica nqs outras, sempre aparece a primeira.

1 curtida
#7

Olha aqui este exemplo, acho que é isso que está procurando, um lightbox.

https://www.w3schools.com/howto/howto_js_lightbox.asp

#8

usa bootstrap, cria row e dentro dessas row cria col-lg 3 - tem que ser igual a 12

aqui está mais detalhado: aconselho usar v4

#9

Isso!!! Exatamente isso que quero fazer, mas desculpe a pergunta leiga, mas como coloco o JavaScript na página? kkk

1 curtida
#10

Consegui fazer com o modal, tem um button que fecha o modal, só não tem os botões previous e next, mas tudo bem. Como coloco ele centralizado na tela? Antes eu tava usando o <style: “text-align: center”> mas agora não consigo mais usar e não consigo deixar eles no centro com os col

#11

joga sua pagina ai nesse site o jsfiddle, veja que ele tem um campo só pra css outro pra html, e uma janela pra javascript e outra pra exibição da pagina, pra testar e ver como está a visualização você deve clicar em ‘run’ no campo superior esquerdo do site, um botaozinho verde. joga seu codigo que eu tento te ajuda a implementa essa galeria ai

#12

Opa! Consegui rodar o site, mas não dá pra inserir o bootstrap nele, as classes entram em conflito. Mas muito obrigado mesmo!

2 curtidas
#13

ai no css do código se você mudar a opacity você consegue deixar um pouco mais claro o fundo quando a imagem estiver em foco.