Resimli Açıklama Widgedi

Blogger Resmin üzerine gelince açıklama yazısını gösteren harika bir kod.Kurulumu Çok Baist Widged ekle diyip ekliyoruz.

Kod:

-*-*- Kod Başlangıç-*-*-

<style>

.image-box {

  width:280px;height:280px;overflow:hidden;background-color:white;

  border:1px solid #ccc;float:left;margin:1px 1px;

  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;

  color:#333;

}

.image-container,

.image-details {height:280px;border:5px solid white;background-color:#ffc;

  transition:margin-top .4s ease-out .4s;

}

.image-container img {

  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;

  max-height:none;

  background-color:black;

}

.image-details h4,

.image-details p {

  margin:0 0 .2em;padding:0 0;height:70px;

}

.image-details h4 {

  font-size:120%;height:auto;

}

.image-details .details {

  padding:10px 12px;overflow:hidden;

}

.image-details .more {

  color:white;text-decoration:none;display:block;

  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;

}

.image-box:hover {border-color:#bbb; width:280px;

  height:280px;}

.image-box:hover .image-container {margin-top:-160px}

.image-details .more:hover {background-color:black}

</style>

<div class="image-box-wrapper" id="image-box-wrapper">

 <div class="image-box">

  <div class="image-container">

   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaq76n-Xn9VLxcRvsXc6bZTRClndEBvDAR-zF9zcwvyQSR3wxRdElSnGzQHtzoNL-5SllMSrUyRWUKKoQa7giPGUFYtXALkNXjRly9nppO-_1wpBIYAPS9viMYrERjK5KlDFCW-SmFv7o/s1600/3.jpg" alt="Food" />

  </div>

  <div class="image-details">

   <div class="details">

    <h4>Pcmerkez Slayt</h4>

    <p>Pcmerkez resmin üzerine gelince açıklama gösteren slayt.Pcmerkez farkıyla...</p>

    <p><a class="more" href="Post Link ">Oku</a></p>

   </div>

  </div>

 </div>

 <div style="clear:both;"></div>

</div>

-*-*- Kod Bitiş -*-*-