Açıklamalı Hareketli Resim Slider

Blogger Açıklama Yazılı Resim Slider Kodu

Oldukça kullanışlı , mouse duyarlı hareketli resim slider eklentisi.

Değişik şekillerde düzenlenerek kullanılabilirsiniz.

<style>
#bt_imageeffect {
   margin: 20px auto;
  width: 100%;min-height: 300px; padding: 20px 0;
  text-align: center;
 }
.galleryItem {
 display: inline-block;;
 position: relative;
 width: 250px; height: 250px;
 padding: 0;margin: 0 20px;
 border: solid 10px #fff;


 -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
 width: 250px;height: 250px;
}
.caption {
 position: relative;
 display: inline-block;
 width: 250px; height: 250px;
 z-index: 10;
}
.caption::before {
 content: attr(data-title);
 position: absolute;top: 0; left: 0;
 width: 250px; height: 0;
  font-family: 'Croissant One', cursive;
 font-size: 1.8em;font-weight: 600;
 line-height: 1.4em;color: #086FA1;
 background: #fff;
 overflow: hidden;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption::after {
 content: attr(data-description);
 position: absolute;
 bottom: -0;left: 0;
 width: 250px;height: 0;
  font-family: 'Poiret One', cursive;
 font-size: 1.1em;
 font-weight: 400;
 line-height: 1.4em;color: #fff;
 background: #222;
 overflow: hidden;


 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption:hover::before {
 height: 125px;
}
.caption:hover::after {
 bottom: 0;height: 125px;
}
</style>


<div id="bt_imageeffect">
<li class="galleryItem">
  <a class="caption" data-description="sen söyle o yazsın." data-title="Nature Scene" href="http://www.webkenti.net/">
  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCx6-Lrjwiy_O0kn3taTtrdZ0QAwNsVAMiVLprA_VzKlTc1TwOmP55j7mZ0v6kBn8gYqmDDr-nDIK6BbXl6bm2lLmmt14oKEJfY8KUKMHQb38KqjM0YYmnAPwR5WQCUH3fVsn2grWaYXxb/s200/combothundercats-logo.jpg"/>
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Vivamus ut sem id magna consequat porta vitae ut sem. Proin eget commodo risus, vitae blandit velit. " data-title="SunFlower" href="#">
  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1i_CLskDJ_wtg781_QocNQ6OAh-Z_idXqeYmzvSWkTZOVSILXbmgLvFVj1zXg3bNlU3KJfk3UraX2Yil30OvLHd5zWHLQP7INgl2HX22PbviLn53CJs2TImyZnyatjz5zb6HbQ2y-i9lT/s1600/WKavatar.png" />
  </a></li></div><!--Author: webkenti.net-->

HTML / JAVASCRIPT EKLEMEK

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.



* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.