Yazılım Örnekleri

css ile javasciprt kullanmadan yatay akardiyon slayt örneği yapacağız.

<style>
#galeri {
  padding: 5px 5px; 
  list-style-type:none; 
  overflow:hidden; 
  width:400px; 
  height:200px; 
  border:1px solid #888;
  background:#D7D7D7 url(resim/arka.png);
    }
#galeri li {
    float:left;
  }
#galeri li a {
  height:200px;
  width:50px; 
  float:left;
  text-decoration:none; 
  border-bottom:3px solid #CCC; 
  cursor:default;
  }
#galeri li a img {
  width:250px; 
  height:200px; 
  border:0;
  }
  
  
#galeri li a:hover {

  background:#eee; 
  height:200px;
  width:250px;
  }
#galeri li a:hover img {
  height:200px;
  width:250px;
  }
</style>

<ul id="galeri">
<li><a href="#"><img src="resim/1.jpg"></a></li>
<li><a href="#"><img src="resim/2.jpeg"></a></li>
<li><a href="#"><img  src="resim/3.jpg"></a></li>
<li><a href="#"><img  src="resim/4.jpg"></a></li>
</ul>