Blogger Açıklama Yazılı Resim Kodu
Oldukça kullanışlı , mouse duyarlı hareketli resim slider.
Site içinde çeşitli amaçlarda kullanıp isteğinize göre özelleştirebilirsiniz.
<style>
.image-box {
width:280px;height:280px;overflow:hidden;background-color:white;
border:1px solid #ccc;float:left;margin:1px 1px;
font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
transition:margin-top .4s ease-out .4s;
}
.image-container img {
width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
max-height:none;
background-color:black;
}
.image-details h4,
.image-details p {
margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
font-size:120%;height:auto;
}
.image-details .details {
padding:10px 12px;overflow:hidden;
}
.image-details .more {
color:white;text-decoration:none;display:block;
text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}
.image-box:hover {border-color:#bbb; width:280px;
height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>
<div class="image-box-wrapper" id="image-box-wrapper">
<div class="image-box">
<div class="image-container">
<img width="280" height="280" src="https://1.bp.blogspot.com/-AZgOOoK5LP4/Whij1Ck98lI/AAAAAAAAEZA/STBb6kb0ZF4-aMCE4VvnT_vm3tI0633zwCPcBGAYYCw/s200/sor.png" alt="Food">
</div>
<div class="image-details">
<div class="details">
<h4>Metin Başlığı</h4>
<p>sen söyle o yazsın...</p>
<p><a class="more" href="http://www.webkenti.net">Devamı</a></p>
</div>
</div>
</div>
<div style="clear:both;"></div>
</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önderme