<!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: 400px;
    height:600px;	
 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: 599px;
width: 400px;
    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="http://www.orienteeringorganiser.com/ondrej">Home</a>         <a href="http://www.orienteeringorganiser.com/ondrej/photos">Photo Galleries</a>         <a href="http://www.orienteeringorganiser.com/ondrej/gifs">GIFs</a>         <a href="http://www.orienteeringorganiser.com/ondrej/contact">Contact</a></pre>
<h5>
</div>

<div id="section">
<ul class="img-list">
<li>
  <img src="01.gif" alt="1"width="400px">
  <span class="text-content"><span>Prague Evenings</span></span> 
  </li>

<li>
   <img src="02.gif" alt="2" width="400px">
  <span class="text-content"><span>Multnomah Falls</span></span>
  </li>

<li>

    <img src="03.gif" alt="3" width="400px">
  <span class="text-content"><span>Atlantic Coast</span></span>
  </li>
<li>
  
    <img src="04.gif" alt="4" width="400px">
  <span class="text-content"><span>Hawaii</span></span>
  </li>
<li>
  
    <img src="05.gif" alt="5" width="400px">
  <span class="text-content"><span>Alpine Nights</span></span>
  </li>
<li>
  
    <img src="06.gif" alt="6" width="400px">
  <span class="text-content"><span>Sunset Waves</span></span>
  </li>
<li>
  
    <img src="07.gif" alt="7" width="400px">
  <span class="text-content"><span>Underneath the Waterfall</span></span> 
  </li>
<li>
     <img src="08.gif" alt="8" width="400px">
  <span class="text-content"><span>Manarola</span></span> 
  </li>
<li>
      <img src="09.gif" alt="9" width="400px">
  <span class="text-content"><span>Oregon Coast</span></span> 
  </li>
<li>
  
    <img src="10.gif" alt="10" width="400px">
  <span class="text-content"><span>Seattle</span></span>
  </li>
<li>
     <img src="11.gif" alt="11" width="400px">
  <span class="text-content"><span>Silver Falls</span></span>
  </li>
<li>

    <img src="12.gif" alt="12" width="400px">
  <span class="text-content"><span>Tulips in Motion</span></span>
  </li>
<li>

    <img src="13.gif" alt="13" width="400px">
  <span class="text-content"><span>Cliff Waves</span></span>
  </li>
<li>

    <img src="14.gif" alt="14" width="400px">
  <span class="text-content"><span>Star Trails</span></span>
  </li>
<li>

    <img src="15.gif" alt="15" width="400px">
  <span class="text-content"><span>Wahkeena Falls</span></span>
  </li>
<li>

    <img src="16.gif" alt="16" width="400px">
  <span class="text-content"><span>Alpine Nights II</span></span>
  </li>
<li>

    <img src="17.gif" alt="17" width="400px">
  <span class="text-content"><span>Horsetail Falls</span></span>
  </li>
<li>

    <img src="18.gif" alt="18" width="400px">
  <span class="text-content"><span>The Great Seattle Wheel</span></span>
  </li>
<li>

    <img src="19.gif" alt="19" width="400px">
  <span class="text-content"><span>Haystack Rock</span></span>
  </li>
<li>

    <img src="20.gif" alt="20" width="400px">
  <span class="text-content"><span>Columbia River Gorge</span></span>
  </li>
<li>

    <img src="21.gif" alt="21" width="400px">
  <span class="text-content"><span>Amsterdam</span></span>
  </li>
   


</ul>

<div id="footer">
Copyright © Ondrej Cernin
</div>
</div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.orienteeringorganiser.com");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-12033635-1");
pageTracker._trackPageview();
} catch(err) {}</script>



</body>
</html>