<!DOCTYPE html>
<html>
<head>
<style>
a { color: inherit; } 
a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}
#header {
    background-color: #000000;
    color: #ffffff;
    text-align:center;
    padding:10px;
}
#nav {
    line-height:00px;
    background-color:#eeeeee;
    height:90px;
    float:top;
    padding:5px;
    text-align:center;
}
#section {
   padding:10px;

text-align: center
}
#footer {
   background-color:black;
    color:white;
    clear:both;
    text-align:center;
    
   width:100%;
}
body {
    color: black;
    font-family: verdana;
    font-size: 130%;}
h5 {
    color: orange;
    font-family: verdana;
    font-size: 140%;
}
h1 {
    color: white;

}
div.img {
display: inline-block;    
margin: 0px;
    border: 0px solid #ccc;
    width: 600px;
    height:400px;	
 text-align:center;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;

}


div.img:hover {
    border: 0px solid #777;
    opacity: 0.4;
    filter: alpha(opacity=40);
-webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
   }

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  
 
  position: relative;
  
}

span.text-content {
  background: rgba(0,0,0,0.6);
  margin: 0 1em 1em 0;
  color: white;
  cursor: pointer;
  display: table;
  font-size: 1.5em;
   left: 0;
  position: absolute;
  top: 0;
height: 398px;
width: 600px;
    opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

li:hover span.text-content {
  opacity: 1;
}
<!-- 
div.desc {
    padding: 0px;
    text-align: center;
-->
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 style="font-size:500%;color=white;" >O C</h1>
</div>

<div id="nav">
<h5 style="float:center">
<pre>
<a href="https://www.orienteeringorganiser.com/ondrej">Home</a>         <a href="https://www.orienteeringorganiser.com/ondrej/photos">Photo Galleries</a>         <a href="https://www.orienteeringorganiser.com/ondrej/gifs">GIFs</a>         <a href="https://www.orienteeringorganiser.com/ondrej/contact">Contact</a></pre>
<h5>
</div>

<div id="section">
<ul class="img-list">
<li>
      <img src="01.jpg" alt="1" width="600px">
  <span class="text-content"><span>Vierwaldstättersee</span></span> 
  </li>

<li>
   <img src="02.jpg" alt="2" width="600px">
  <span class="text-content"><span>The Glow of Pilatus</span></span>
  </li>

<li>

    <img src="03.jpg" alt="3" width="600px">
  <span class="text-content"><span>Glaubenbielen</span></span>
  </li>
<li>
  
    <img src="04.jpg" alt="4" width="600px">
  <span class="text-content"><span>Schwamhöchi</span></span>
  </li>
<li>
  
    <img src="05.jpg" alt="5" width="600px">
  <span class="text-content"><span>Pilatus</span></span>
  </li>
<li>
  
    <img src="06.jpg" alt="6" width="600px">
  <span class="text-content"><span>Mythen</span></span>
  </li>
<li>
  <a target="_blank" href="7">
    <img src="07.jpg" alt="7" width="600px">
  <span class="text-content"><span>Vierwaldstättersee</span></span></a> 
  </li>
<li>
  <a target="_blank" href="8">
    <img src="08.jpg" alt="8" width="600px">
  <span class="text-content"><span>Pilatus</span></span></a> 
  </li>
<li>
  <a target="_blank" href="09">
    <img src="09.jpg" alt="9" width="600px">
  <span class="text-content"><span>Snowy Trees</span></span></a> 
  </li>
<li>
  <a target="_blank" href="10">
    <img src="10.jpg" alt="10" width="600px">
  <span class="text-content"><span>Schwyz</span></span></a> 
  </li>
<li>
     <img src="11.jpg" alt="11" width="600px">
  <span class="text-content"><span>Eiger, Monch and Jungfrau</span></span>
  </li>
<li>

    <img src="12.jpg" alt="12" width="600px">
  <span class="text-content"><span>Foggy Forest</span></span>
  </li>
<li>

    <img src="13.jpg" alt="13" width="600px">
  <span class="text-content"><span>Above the Fog</span></span>
  </li>
<li>
  
    <img src="14.jpg" alt="14" width="600px">
  <span class="text-content"><span>Chateau de Chillon</span></span>
  </li>
<li>
  
    <img src="15.jpg" alt="15" width="600px">
  <span class="text-content"><span>Splügenpass</span></span>
  </li>
<li>
  
    <img src="16.jpg" alt="16" width="600px">
  <span class="text-content"><span>Matterhorn</span></span>
  </li>
<li>
  
    <img src="17.jpg" alt="17" width="600px">
  <span class="text-content"><span>Pilatus</span></span>
  </li>
<li>
  
    <img src="18.jpg" alt="18" width="600px">
  <span class="text-content"><span>Eigergletscher</span></span>
  </li>
<li>
  
    <img src="19.jpg" alt="19" width="600px">
  <span class="text-content"><span>Zermatt</span></span>
  </li>
<li>
  
    <img src="20.jpg" alt="20" width="600px">
  <span class="text-content"><span>Klontalersee</span></span> 
  </li>
<li>
  
 </ul>

<div id="footer">
Copyright © Ondrej Cernin
</div>
</div>
</body>
</html>