Elektronik Devreler: Animasyonlu Resim Gösterisi

Kodları kopyala yapıştır

<style>

@-webkit-keyframes supersize {
  0% { -webkit-transform:scale(.9); }
  100% { -webkit-transform:scale(1); }
}
body {background:#f5efe3;}
img {vertical-align:middle;}
ul {
  list-style:none;
  padding:0;
}
nav {
  position:absolute;
  width:100%;
  left:0;
  top:50%;
  margin-top:-100px;
  text-align:center;
}
nav li {
  display:inline;
  margin:0 5px;
}
nav img {
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-box-shadow:0 1px 0 #fff;
  -moz-box-shadow:0 1px 0 #fff;
  box-shadow:0 1px 0 #fff;
  -webkit-transition:opacity .2s linear;
  -moz-transition:opacity .2s linear;
  -o-transition:opacity .2s linear;
  transition:opacity .2s linear;
}
nav a:hover img {opacity:.75;}
nav a:active img {margin-top:1px;}
li[id] {
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:rgba(0,0,0,.8);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  transition:opacity 1.2s cubic-bezier(0,0,0,1);
}
li[id] a:before {
  content:url(img/close.png);
  position:absolute;
  top:-26px;
  left:-26px;
  opacity:0;
}
li[id] a:hover:before {opacity:1;}
li[id]:target {
  width:100%;
  height:100%;
  opacity:1;
}
li[id]:target a {
  position:absolute;
  top:40%;  /* büyütülmüş resmin konumu */
  left:50%;
  margin:-220px 0 0 -380px;
  border:15px solid #fff;
  -webkit-box-shadow:0 1px 8px #000;
  -moz-box-shadow:0 1px 8px #000;
  box-shadow:0 1px 8px #000;
  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);
}
</style>

Elektronik Devreler

Ziyaretçi Sayısı

ARAMA YAPIN

17 Haziran 2016 Cuma

Resimi LightBox Gösterme Html Kodları