Galeria com URL's

cybernetico

cybernetico

Power Member
Boas pessoal,
tenho tentado vezes sem conta, mas sem sucesso, colocar um link num conjunto de imagens. O código que tenho é o seguinte:

HTML:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="galeria de imagens02.css">
</head>
<body background="background-galeria de imagens.png">
<div class="container">
<h1>Biblioteca de Fotografias</h1>
<audio src="Roxette - Listen To Your Heart.mp3" autoplay loop></audio>
<div class="cardList">
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=9eb3d5fe50f534e8ca6fe6e312030e75&oe=59E09FC5')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=837b8fed44ce37fdc239ba4f1e2a6877&oe=59E4AEC0')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=4ac979c6993846c19908cbe407d5baff&oe=59D1907E')"></div>
</div><span class="cardList__title">Sophie</span>
</div>
<div class="cardList">
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=4fed4f6fe2e61c74aaec83a008b080c3&oe=59CEEE6E')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=c8e3f1a1ee41c57ebba2b772bd7cee3e&oe=59D6955D')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=6aa58dcf7b5413597ea4511b23ec9e31&oe=59DB2E49')"></div>
</div><span class="cardList__title">Carlos</span>
</div>
<div class="cardList">
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=681ca0a5696e1787c873497191c79815&oe=59C5D885')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=18e189455ae2702db7da519bfc699a2f&oe=59E5E808')"></div>
</div>
<div class="card">
<div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=fce8b8fac238b1cbd28b9d31f60406c4&oe=59C6ECA9')"></div>
</div><span class="cardList__title">André</span>
</div>
</div>
</body>
</html>


CSS:

* {
box-sizing: border-box;
}
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
background-color: #666;
}
h1 {
font-weight: 100;
text-align: center;
font-family: Arial;
}
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 80vw;
margin: auto;
}
.container h1 {
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
width: 100%;
margin: 0 2% 4em 2%;
}
.cardList {
position: relative;
display: block;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
margin: 2%;
-webkit-filter: none;
filter: none;
opacity: 1;
-webkit-transition: 0.25s ease-in-out opacity, 0.25s ease-in-out filter;
transition: 0.25s ease-in-out opacity, 0.25s ease-in-out filter;
cursor: pointer;
}
.cardList__title {
display: block;
padding-top: 70%;
text-align: center;
font-size: 1.2em;
opacity: 0.8;
z-index: 0;
}
.cardList:hover .card {
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.5);
-webkit-transition: 0.35s ease-out transform, 0.35s ease-out shadow;
transition: 0.35s ease-out transform, 0.35s ease-out shadow;
}
.cardList:nth-child(2n + 1) .card:nth-child(1) {
-webkit-transform: translate(-2%, -2%);
transform: translate(-2%, -2%);
}
.cardList:nth-child(2n + 1) .card:nth-child(2) {
-webkit-transform: translate(-2%, 2%) rotate(2deg);
transform: translate(-2%, 2%) rotate(2deg);
}
.cardList:nth-child(2n + 1) .card:last-of-type {
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.cardList:nth-child(2n + 1):hover .card__bg {
-webkit-filter: none;
filter: none;
opacity: 1;
}
.cardList:nth-child(2n + 1):hover .card:nth-child(1) {
-webkit-transform: translate(30%, 45%) rotate(-2deg);
transform: translate(30%, 45%) rotate(-2deg);
}
.cardList:nth-child(2n + 1):hover .card:nth-child(2) {
-webkit-transform: translate(-50%, 35%) rotate(5deg);
transform: translate(-50%, 35%) rotate(5deg);
}
.cardList:nth-child(2n + 1):hover .card:last-of-type {
-webkit-transform: rotate(5deg) translate(0%, -40%);
transform: rotate(5deg) translate(0%, -40%);
}
.cardList:nth-child(2n) .card:nth-child(1) {
-webkit-transform: translate(2%, 2%);
transform: translate(2%, 2%);
}
.cardList:nth-child(2n) .card:nth-child(2) {
-webkit-transform: translate(2%, -2%) rotate(-2deg);
transform: translate(2%, -2%) rotate(-2deg);
}
.cardList:nth-child(2n) .card:nth-child(3) {
-webkit-transform: rotate(2deg);
transform: rotate(2deg);
}
.cardList:nth-child(2n):hover .card:nth-child(1) {
-webkit-transform: translate(2%, 50%) rotate(5deg);
transform: translate(2%, 50%) rotate(5deg);
}
.cardList:nth-child(2n):hover .card:nth-child(2) {
-webkit-transform: translate(50%, -30%) rotate(10deg);
transform: translate(50%, -30%) rotate(10deg);
}
.cardList:nth-child(2n):hover .card:nth-child(3) {
-webkit-transform: translate(-25%, -40%) rotate(-5deg);
transform: translate(-25%, -40%) rotate(-5deg);
}
.card {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 60%;
background-color: #ccc;
-webkit-transition: 0.28s ease-out transform, 0.28s ease-out shadow;
transition: 0.28s ease-out transform, 0.28s ease-out shadow;
overflow: hidden;
z-index: 5;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}
.card__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-repeat: no-repeat;
background-size: cover;
background-color: #ccc;
}
.card:not(:last-of-type) .card__bg {
background-blend-mode: multiply;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.25;
-webkit-transition: 0.25s ease-in-out filter, 0.25s ease-in-out opacity;
transition: 0.25s ease-in-out filter, 0.25s ease-in-out opacity;
}
.cardList:hover .card:not(:last-of-type) .card__bg {
background-blend-mode: normal;
-webkit-filter: none;
filter: none;
opacity: 1;
}
.container:hover .cardList {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
opacity: 0.25;
z-index: 1;
}
.container:hover .cardList:hover {
-webkit-filter: none;
filter: none;
opacity: 1;
z-index: 100;
}

Alguém me pode dar uma ajudinha pls?
Obrigado desde já.
 
Boas.
Por Favor, quando postares Código, usa as Tags [CODE*][/CODE*] (sem o *)
Código:
para conseguirmos ler melhor o teu Código.
Obrigado :)
 
cybernetico disse:
Obrigado pela resposta mas não tá a resolver o meu problema :(
Existe outra solução?
Clicar para expandir...

Código: 
<a href="http://www.google.com/">
   <div class="card__bg" style="background-image: url('https://scontent.fopo1-1.fna.fbcdn....=9eb3d5fe50f534e8ca6fe6e312030e75&oe=59E09FC5')"></div>
</a>

Isso no meu Browser quando clico na Imagem, vai para o Google.
Por isso no teu deve fazer o mesmo.
 
Inicie sessão ou registe-se para poder participar.
Back
Topo