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="http://4.bp.blogspot.com/-fE9YqymGM9Q/TnOGjIrbzGI/AAAAAAAAAI0/-INeaLJ8aMw/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="http://3.bp.blogspot.com/-9mY6mTOnyAw/VeYokVkAXSI/AAAAAAAAAIk/FoO1VkeIio0/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.
Yorumlar
Yorum Gönder
🔺 YUKARI ÇIK 🔺