Frame Photo/Kotak Iklan Tidak Beraturan

Frame Photo/Kotak Iklan Tidak Beraturan - Membuat kotak iklan dengan ukuran 125px X 125px dengan tampilan yang acak atau tidak beraturan dengan gaya miring yang berbeda-beda, kotak iklan ini bisa kita jadikan sebuah frame sebuah gambar photo atau pun untuk menampilkan gambar/icon logo.

Ini merupakan salah satu model tampilan yang bisa dijadikan pilihan untuk menampilkan sebuah gambar yang bertautan pada sebuah produk ataupun sebuah halaman yang berbeda.

Penempatannya bisa ditempatkan pada bagian sidebar untuk mempermudah pengunjung melihat, karena sidebar merupakan bagian penting dan biasa dijadikan tempat untuk menampilkan sebuah kotak iklan.

Kurang lebih tampilannya seperti gambar diatas dan untuk demonya sendiri bisa melihat dengan meng-klik tombol demo bawah ini:

• Demo

Untuk membuatnya hanya dengan css yang sederhana dan mudah untuk kita modifikasi sesuai dengan keinginan yang kita sesuaikan.

CSS

#frame {
  background:transparent;
  border:4px solid #ddd;
  margin:0 auto;
  padding:2% 0 0 3%;
  position:relative;
  overflow:hidden;
  width:300px;
}
.frame {
  background:#ddd;
  box-shadow:0px 2px 5px #666;
  float:left;
  height:135px;
  margin:0 3% 4% 0;
  text-align:center;
  position:relative;
  width:45.5%;
  -webkit-transition:all 0.5s linear;
  -moz-transition:all 0.5s linear;
  -o-transition:all 0.5s linear;
  transition:all 0.5s linear;
  -webkit-transform:rotate(-5deg);
  -moz-transform:rotate(-5deg);
  -o-transform:rotate(-5deg);
  -ms-transform:rotate(-5deg);
  transform:rotate(-5deg);
}
.frame:nth-child(2n+0) {
  -webkit-transform:rotate(15deg);
  -moz-transform:rotate(15deg);
  -o-transform:rotate(15deg);
  -ms-transform:rotate(15deg);
  transform:rotate(15deg);
}
.frame:nth-child(3n+0) {
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  transform:rotate(10deg);
}
.frame:nth-child(4n+0) {
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  transform:rotate(-10deg);
}
.frame a:hover:after {
  background:rgba(0,0,0,0.25);
  font:normal 12px arial,sans-serif;
  color:#999;
  text-decoration:none;
  content:attr(title);
  position:absolute;
  left:4%; 
  bottom:3%;
  width:92%;
  z-index:1;
}
.frame img {
  margin:4% auto 0;
  width:125px;
  height:125px;
}
.frame:hover {
  background:#eee;
  box-shadow:2px 3px 5px #333;
  -webkit-transform:scale(1.1,1.1);
  -moz-transform:scale(1.1,1.1);
  -o-transform:scale(1.1,1.1);
  -ms-transform:scale(1.1,1.1);
  transform:scale(1.1,1.1);
  position:relative;
  z-index:10;
}

HTML

<div id="frame">
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
  <div class="frame"><a href="###" title="Banner"><img src="Alamat Gambar" alt="Banner"/></a>
  </div>
</div>

Semoga bermanfaat.