Ocultar Imagem

[John Hebert Trindade 0]

Boa tarde pessoal, sou novo aqui no site.

Estou reformulando meu site para ser responsivo, só que necessito de algo que não sei como fazer e nem encontrei nada, talvez não encontrei por não ter digitado o nome correcto do assunto.

Estou fazendo uma galeria de fotos, mas gostaria que só aparecesse a primeira imagem e somente ao clicar nela que as restantes fossem apresentadas.

exemplo:

<div class="fotos">
	<a href="img/carros.jpg" title="Carro Funerário">
		<img class="media-object" src="img/carro1.jpg" alt="Post">
      	<img class="media-object" src="img/carro2.jpg" alt="Post">
      	<img class="media-object" src="img/carro3.jpg" alt="Post">
      	<img class="media-object" src="img/carro4.jpg" alt="Post">
	</a>
</div>

script

$(document).ready(function() {
  $('.fotos').magnificPopup({
  delegate: 'a', 
  type: 'image',
  gallery:{enabled:true}
});
});

já tentei colocar:

.fotos{
	display: none;
}

.fotos{
	visility: hidden;
}

mas não deu certo, por favor ajudem me.

[Cerzedelo 42]

Talvez o mais fácil fosse utilizar o fancybox ou outro plugin simular.

http://fancybox.net/