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!
