/* html- en css-code voor het maken van een fotoalbum met overzicht en
vergroting  die je kunt doorlopen (een soort diavoorstelling),
voor het eerst gebruikt voor Dunkeld 2016.
Deze code heb ik van de site
http://www.mijn-eigen-website.nl/fotogalerij.html
van Boukeline Arnold, met kleine aanpassingen, een hoop wist ik nog niet.
15 september 2016 */

/* Omdat ik zelf img met float heb, moet ik dat hieronder expliciet anders aangeven (ik had
natuurlijk een div kunnen gebruiken)
max-width is schalen maar niet groter dan aantal pixels van origineel
padding en border doe ik strakker: zonder kader, maar ik laat ze wel staan (op nul) */

.fotogalerij {
	max-width: 100%; margin: 20px; text-align: center;
}
.fotogalerij img {
	float: none; padding: 0px; border: 0px solid darkgrey; margin: 4px;
}

/* de eigenschappen van de foto die als 'pop-up' in het groot vertoond wordt
met pijltjes 'volgende' en 'vorige' (ogt blijkt 'groter dan' met cirkeltje erom)
kleur rgba is met toevoeging van alpha-kanaal, is doorzichtigheid, hier zwart met
doorzichtigheid van 0.7 (was 0.8) */

.foto-popup {
	display: none;
}
.foto-popup:target {
	display: block; position: fixed; z-index: 999; width: 100%; height: 100%;
	top: 0; left: 0; background: rgba(0,0,0,0.7); text-align: center;
}
.foto-popup img {
	float: none; max-width: 100%; padding: 0px;
  position: relative; top: 50%; transform: translateY(-50%);
}
.vorige, .volgende {
	position: fixed; top: 50%; transform: translateY(-50%);
	text-decoration: none; color: darkgrey; font-size: 5em;
}
.vorige:hover, .volgende:hover {
	color: white;
}
.vorige {
	left: 0.25em;
}
.volgende {
	right: 0.25em;
}

/* snap ik nog niet … */
@media screen and (max-width: 400px) { .vorige, .volgende { font-size: 3em; } }