Yazılım Örnekleri

<style>
#galeri {
  padding: 5px 5px; 
  list-style-type:none; 
  overflow:hidden; 
  width:400px; 
  height:420px; 
  border:1px solid #888;
  background:#D7D7D7 url(resim/arka.png);
    }
#galeri li {
    float:top;
  }
#galeri li a {
  display:block; 
  height:50px;
  width:400px; 
  float:top;
  text-decoration:none; 
  border-bottom:3px solid #CCC; 
  cursor:default;
  }
#galeri li a img {
  width:400px; 
  height:50px; 
  border:0;
  }
  
  <!--mouse ile ustune geldiğimizde çalışacal kısım-->
#galeri li a:hover {

  background:#eee; 
  height:250px;
  }
#galeri li a:hover img {
  height:250px;
  }
</style>
<ul id="galeri">
<li><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img  src="img/3.jpg"></a></li>
<li><a href="#"><img  src="img/4.jpg"></a></li>
</ul>