Como aumentar a imagem duma galeria de imagens?

cybernetico

cybernetico

Power Member
Boas pessoal.
Eu estou a querer aumentar a imagem duma galeria de imagens, mas não tou a conseguir.
Alguém me pode ajudar?
Cumprimentos
 
ok, vou-te enviar as linhas de código:
HTML
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="galeria de imagens.css">
</head>
<body background='background-galeria de imagens.png'>
<h1>Galeria de Imagens</h1>
<audio src="Roxette - Listen To Your Heart.mp3" autoplay loop></audio>
<div class='container'>
<div class='map map-1' style="background-image:url('DSCF6839.JPG')"><a href="Imagem (07-06-2017) - 01.html"></a></div>
<div class='map map-2' style="background-image:url('DSCF6840.JPG')"></div>
<div class='map map-3' style="background-image:url('DSCF6841.JPG')"></div>

<div class='shelf'></div>
</div>

</body>
</html>


CSS
html,
body {
width: 100%;
height: 100%;
}
body {
-ms-flex-wrap: no-wrap;
flex-wrap: no-wrap;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.container {
width: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-perspective: 1000;
perspective: 1000;
position: relative;
}
.map {
width: 200px;
height: 300px;
margin: 0 -25px;
position: relative;
box-shadow: 0px 0px 110px -5px rgba(0, 0, 0, 0.5);
background-size: cover;
background-position: center;
border-radius: 5px;
-webkit-transition: .2s;
transition: .2s;
cursor: pointer;
}
.map:hover {
-webkit-transition: .2s;
transition: .2s;
-webkit-transform: translateZ(5px) translateY(-20px) scale(1.05);
transform: translateZ(5px) translateY(-20px) scale(1.05);
}
.map-1,
.map-4 {
-webkit-transform: translateZ(1px);
transform: translateZ(1px);
}
.map-2,
.map-5 {
-webkit-transform: translateZ(2px) translateY(-5px);
transform: translateZ(2px) translateY(-5px);
}
.map-3 {
-webkit-transform: translateZ(3px) translateY(-10px);
transform: translateZ(3px) translateY(-10px);
}
.map-1:hover ~ .map-2 {
-webkit-transform: translateZ(4px) translateY(-15px);
transform: translateZ(4px) translateY(-15px);
-webkit-transition: .2s;
transition: .2s;
}
.map-4 {
-webkit-box-ordinal-group: 6;
-ms-flex-order: 5;
order: 5;
}
.map-4:hover ~ .map-5 {
-webkit-transform: translateZ(3px) translateY(-15px);
transform: translateZ(3px) translateY(-15px);
-webkit-transition: .1s;
transition: .1s;
}
.shelf {

height: 100px;
width: 100%;
position: absolute;
bottom: -75px;
left: 0;
-webkit-transform: translateZ(10px);
transform: translateZ(10px);
}

Obrigado desde já.
Abraço
 
Na classe map alteras width e height.

Edit: Já que tens uma classe por imagem, podes definir o background no css em vez de tar no html.

Edit2:
- Onde tens flex-group: no-wrap devia ser flex-group: nowrap
- No body mete margin: 0 e padding: 0
- A anchor que tens na primeira imagem não tem qq css, e acaba por nem aparecer na página (0x0). Se o objectivo é poder clicar na imagem e ir para esse url, tens de acrescentar display: block; width: 100%; height: 100%;
 
Última edição:
Boas,
sim a intenção é clicar na imagens e aumentar o tamanho da imagem.
Onde tenho de colocar "display: block; width: 100%; height: 100%;"?

Obrigado
 
Inicie sessão ou registe-se para poder participar.
Back
Topo