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/AVvXsEix4af2w-16kRg8P3M6JuKXD7dsaF04XlBtV0seVgCrFC2KGhUX7aclYr5a-UzYvt_aag351FNImHlxdpygh9zaLcHmyZTQftQaiXnoWKwmZyvNGwY7iruaIm_UC5s-WuGh4N84CrUnUwc/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/AVvXsEg1A5VeI9q1QHgR4gyq5YldpvtMnGdJP9NULCiOmS1YlUtlqfYFIxCxzlt1qQblYe2KOzO6B0UUQHvg8N8L5TP8ciKR5SDXUz9U7Z6ACs6K1qoVcKIAWyAfi6ewvvqD7Yqyy1le9R7epKM/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!