Blogger Hareketli Başlık ve Açıklamalı Hover Efektli Slayt

   Blogger kullanıcıları için farklı bir Hover efektli hareketli açıklamalı resim slayt eklenti özelliği daha.Kullanımı kolay ve yazı içerisinde kullanılmasını tavsiye ederim.

<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="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id sapien condimentum, sagittis erat rhoncus, bibendum nisi." data-title="Nature Scene" href="#">

  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNbzsrdj01pgcb2LOxglSmUJzAnLbeHQRAYDBuC-yWG79TIvvVe3Fm0RG_aik2lLKN33YgGU4cafDmHKhooqJxgro7efMKay2GY3QGdI_94oNrkcSBEGVOFq3Q0OK00nJcTRcuerlySCY/s1600/Green+Nature+Wallpapers.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/AVvXsEjxOYmRH32umFlav_xoLuw9jdVIK0NFNy1fmoAgBNaGyqMWXkdmlXTktazQT48GrthyphenhyphendjW_cqdEYUYWB7h_EMEw8oqGwkDsl510oX4b-DDiJpHJgk8or_oW4Dzv6uME4e0nfOQvV4vOWCE/s1600/nature_3.png" />

  </a></li></div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!