Boa tarde, pessoal!
Estou começando com HTML há pouco tempo e tenho que entregar um trabalho na faculdade. Na página que estou fazendo quero fazer um efeito flip com algumas imagens, sendo ao clicar nelas seja exibido um pequeno painel sobre cada uma delas, de forma independente.
Com o código que eu fiz não consigo fazer isso em todas as fotos, apenas na primeira imagem.
Segue o esboço do código:
<!Doctype html>
<html>
<head>
<title>TESTE</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset = 'utf=8'>
<style type="text/css">
body{
background: gray;
}
#flip{
cursor: pointer;
}
#panel{
text-align: justify;
padding: 5px;
display: none;
width: 25%;
opacity: 0.4;
background-color: #ffffff;
}
</style>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
</head>
<body>
<div align = 'left' >
<img id = 'flip' src = 'foto1.jpg'>
<div>Nome da Foto</div>
<div id = 'panel'>Aqui foi reservado para que seja exposto
um pequeno texto referenete a imagem clicada.</div>
</div>
<div align = 'center' >
<img id = 'flip' src = 'foto1.jpg'>
<div>Nome da Foto</div>
<div id = 'panel'>Aqui foi reservado para que seja exposto
um pequeno texto referenete a imagem clicada.</div>
</div>
<div align = 'right' >
<img id = 'flip' src = 'foto1.jpg'>
<div>Nome da Foto</div>
<div id = 'panel'>Aqui foi reservado para que seja exposto
um pequeno texto referenete a imagem clicada.</div>
</div>
</body>
</html>