Kali ini saya memberitau CSS agar bisa mempercantik album foto di website ,nah tapi sih albumnya bukan seperti diam aja,foto yang langsung di klik akan mengeluarkan text2 yang akan kita tulis,nah mau tau bagaimana tampilannya?
Nah gimana ya lumayanlah untuk menyimpan text pada foto :D
nah begini Caranya,,
Pemasukan CSS
Biasanya Code CSS letak di atas code </Style>atau ]]></b:skin>
nah copy Code CSS ini dan letakan di atas Code yg saya kasih tadi
ul.fotos-detail {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.fotos-detail li {
-moz-transition: all 200ms ease-in-out 0s;
-ms-transition: all 200ms ease-in-out 0s;
-o-transition: all 200ms ease-in-out 0s;
-webkit-transition: all 200ms ease-in-out 0s;
transition: all 200ms ease-in-out 0s;
list-style: none outside none;
background: #FFF;
border: 1px solid #D2D5D9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(113, 117, 129, 0.2);
float: left;
margin: 10px 7px;
padding: 5px;
}
ul.fotos-detail li:hover {
background:#6eb1e0;
border: 1px solid #177bc0;
border-bottom-color: #0f4d78;
-moz-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
-webkit-box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
box-shadow:0 1px 10px rgba(0,0,0,0.29),0 1px 4px rgba(23,148,232,0.81),inset 0 1px 0 #bbecf3;
}
ul.fotos-detail .notification-info {
-moz-transition: all 200ms ease-in-out 400ms;
-ms-transition: all 200ms ease-in-out 400ms;
-o-transition: all 200ms ease-in-out 400ms;
-webkit-transition: all 200ms ease-in-out 400ms;
transition: all 200ms ease-in-out 400ms;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
font-family: Arial,Helvetica;
line-height: 1;
padding: 7px 0;
position: absolute;
text-align: center;
width: 100%;
opacity:1;
z-index: 15;
}
ul.fotos-detail li:hover .notification-info {
opacity: 0;
margin-left: -180px;
}
ul.fotos-detail .notification-info span {
color: #FFF;
font-size: 11px;
font-weight: bold;
word-wrap: break-word;
}
.img-box-corte-fotos {
background-color: #FFF;
height: 180px;
overflow: hidden;
position: relative;
width: 210px;
z-index: 99;
}
.img-box-corte-fotos img {
width: 350px;
}
.title-ff {
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
display: block;
font-size: 12px !important;
margin-bottom: 5px;
padding-bottom: 5px;
}
.img-box-corte-fotos .time {
font-weight: bold;
}
.conten-img-cut {
-moz-transition: all 200ms ease-in-out 200ms;
-ms-transition: all 200ms ease-in-out 200ms;
-o-transition: all 200ms ease-in-out 200ms;
-webkit-transition: all 200ms ease-in-out 200ms;
transition: all 200ms ease-in-out 200ms;
height: 180px;
overflow: hidden;
position: relative;
width: 210px;
opacity:1;
z-index: 10;
}
ul.fotos-detail li:hover .conten-img-cut {
opacity:0;
}
ul.fotos-detail li:hover .conten-img-cut.left {
margin-left: -210px;
}
ul.fotos-detail li:hover .conten-img-cut.right {
margin-left: 210px;
}
ul.fotos-detail li:hover .conten-img-cut.top {
margin-top: -180px;
}
ul.fotos-detail li:hover .conten-img-cut.bottom {
margin-top: 180px;
}
.texto-content {
-moz-transition: all 200ms ease-in-out 500ms;
-ms-transition: all 200ms ease-in-out 500ms;
-o-transition: all 200ms ease-in-out 500ms;
-webkit-transition: all 200ms ease-in-out 500ms;
transition: all 200ms ease-in-out 500ms;
color: #555555;
font-family: Arial,Helvetica;
font-size: 12px;
height: 170px;
padding: 5px;
position: absolute;
line-height: 1.3;
top: 0;
width: 200px;
opacity: 0;
z-index: 5;
}
ul.fotos-detail li:hover .texto-content {
opacity: 1;
}
Sesudah itu Simpan Template
CODE HTML
Nah sekarang kita akan masukkan Code htmlnya,Code HTML bisa di letakan di mana saja jikalau ada Code CSSnya
<ul class="fotos-detail">
<li>
<div class="img-box-corte-fotos">
<div class="conten-img-cut left">
<img border="0" src="URL GAMBAR ANDA">
</div>
<div class="texto-content">
TEXT YANG ANDA INGINKAN DALAM CONTENT FOTO
</div>
<div class="notification-info">
<span class="title-ff">KLIK DI SINI</span>
<span>12 Januari 2014</span>
</div>
</div>
</a>
</li>
<div style="clear:both"></div>
</ul>
Oke Semoga bermanfaat
Hasilnya seperti ini
Title : Membuat Album Fade dengan CSS
Description : Kali ini saya memberitau CSS agar bisa mempercantik album foto di website ,nah tapi sih albumnya bukan seperti diam aja,foto yang langsun...
