Annotation Overlay Effect use CSS3

Mencomot artikel dari web master developer sangat terasa berfungsi ketika tidak ada ide postingan macam sekarang ini sob ;)) Contoh master JMiur dalam postingan Paneles deslizantes con CSS, menyadur ide dari Sliding Image Panels with CSS3 by Mary Lou.
Selidik punya ngelihat ternyata ada satu keistimewaan variable kode input di sana. Setelah dirangkai dengan code lain, variabel input bisa digunakan untuk menghilangkan & menampilkan sebuah konten. Sederhana pemakaian sudah Koben terapkan pada artikel Marhaban Yaa Ramadhan 1433 H Silahkan klik gambar yang ada disana! Maka dari itu, gue comot yang berikut dari Codrops Annotation Overlay Effect with CSS3

Yuk kita buat begituan versi bloglang :D Sediakan CSS utk sebuah konten area..item-preview{
width: 100%;
position: relative;
}
.item-preview img{
width: 100%;
height: 500px;
display: block;
margin: 10px auto;
box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
}Kemudian tambahkan CSS brkt

.bb-annotations{
width: 100%;
height:100%;
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
z-index: 5;
background: rgba(0,0,0,0.4);
box-shadow: 1px 1px 3px rgba(0,0,0,0.5);
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bb-annotations span{
display: block;
position: absolute;
padding: 10px 0;
width: 25%;
min-width: 101px;
text-align: center;
background: #A6CF72;
color: #18343E;
font-size: 1.1em;
opacity: 0;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.bb-annotations span:nth-child(1) {
top: 10%;
left: 16%;
}
.bb-annotations span:nth-child(2) {
top: 26%;
left: 3%;
}
.bb-annotations span:nth-child(3) {
top: 37%;
right: 2%;
}
.bb-annotations span:nth-child(4) {
top: 56%;
right: 15%;
}
.bb-annotations span:nth-child(5) {
bottom: 25%;
left: 4%;
}
.bb-annotations span:nth-child(6) {
top: 15%;
right: 15%;
}
input.bb-toggle {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
margin: 0;
padding: 0;
opacity: 0;
z-index: 100;
border: none;
cursor: pointer;
}
input.bb-toggle:checked + img {
box-shadow: 1px 1px 6px rgba(0,0,0,0.5);
opacity: 1;
}
input.bb-toggle:hover + img{
opacity: 1;
}
input.bb-toggle:checked ~ .bb-annotations,
input.bb-toggle:checked ~ .bb-annotations span{
opacity: 1;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(1) {
-moz-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(2) {
-moz-transition-delay: 0.4s;
-webkit-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
-ms-transition-delay: 0.4s;
transition-delay: 0.4s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(3) {
transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(4) {
-moz-transition-delay: 0.6s;
-webkit-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
-ms-transition-delay: 0.6s;
transition-delay: 0.6s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(5) {
-moz-transition-delay: 0.7s;
-webkit-transition-delay: 0.7s;
-o-transition-delay: 0.7s;
-ms-transition-delay: 0.7s;
transition-delay: 0.7s;
}
input.bb-toggle:checked ~ .bb-annotations span:nth-child(6) {
-moz-transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
-o-transition-delay: 0.8s;
-ms-transition-delay: 0.8s;
transition-delay: 0.8s;
}

Enam buah gue buat konten yang tidak terlihatnya. Menghilangkan var. -transform: scale(); Hasil akhir sami sareung...

Blogger How To?Coded WritedHTML CodeHack BloggerTutorial BloggerTrik dan Tips

Happy coding \m/