.gallery {
  cursor: default;
  list-style: none;
  border-color: #51504a;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  display: inline;
  float: left;
  margin: 1px 20px;
  padding: 3px;
  width: 220px;
  font-size: 100%;
  text-align: center;
  position: relative;
  }

.gallery a {
  cursor: pointer;
 }

.gallery a .preview {
  display: none;
 }

.gallery a:hover {
  background-color: #EEEEEE;
 }

.gallery a:hover .preview {
  display: block;
  position: absolute;
  top: -60%;
  left: -52%;
  z-index: 3;
 }

/* 
width-Attribut durch max-width ersetzt, um Portrait- und Landscape-Format gleichzeitig 
darstellen zu können. Preview-Größe deshalb auch mit max-width. Bildformat: 800x600.
*/

.gallery img {
  background-color: #EEEEEE;
  border-color: #51504a;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  padding: 1px;
  vertical-align: top;
  max-width: 216px;
  max-height:180px;
  }

/* 
width-Attribut ist nur notwendig für gleich breite Kacheln, wenn keine width  
für img gesetzt wurde, um Bilder im Potraitformat seitentreu darzustellen. 
text-align: center dient dazu, Bilder im Potraitformat zu zentrieren.
*/

.gallery .preview {
  border-color: #51504a;
  border-width: 1px;
  padding: 1px;
  max-width: 600px;
  max-height: 600px;
 }