Gambar adalah hal yang biasa terdapat dalam suatu blog dan gambar itu juga mempunyai banyak keunggulan seperti lebih memudahkan dalam menerangkan, gambaran sederhana dari suatu detail yang panjang, dll. Akan lebih mudah apabila dalam gambar tersebut kia bisa langsung menyisipkan keterangan berupa teks didalam gambar, disini saya akan membahas tentang beberapa efek dalam menyisipkan teks di dalam gambar.
Menyisipkan CSS
1. Membuat informasi gambar dengan efek slide pop up
.wrap1 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px 0 50px; float:left;}
.wrap1 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap1 img {border:0;}
.wrap1 i {display:block; width:320px; height:110px; position:absolute; left:0; top:213px; z-index:1; background:#000; filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap1 p {display:block; width:320px; height:110px; position:absolute; left:0; top:213px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap1 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap1 p span {display:block; padding:10px; line-height:20px;}
.wrap1 a:hover {direction:ltr;}
.wrap1 a:hover i {top:103px;}
.wrap1 a:hover p {top:103px;}
2. Membuat informasi gambar dengan efek setengah slide atas
.wrap2 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left;}
.wrap2 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap2 img {border:0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap2 i {display:block; width:320px; height:110px; position:absolute; left:0; top:-110px; z-index:1; background:#000;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap2 p {display:block; width:320px; height:110px; position:absolute; left:0; top:-110px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap2 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap2 p span {display:block; padding:10px; line-height:20px;}
.wrap2 a:hover {direction:ltr;}
.wrap2 a:hover img {margin-top:110px;}
.wrap2 a:hover i {top:0;}
.wrap2 a:hover p {top:0;}
3. Membuat informasi gambar dengan efek full text
.wrap3 {clear:left; width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:20px 215px; float:left; background:#000;}
.wrap3 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap3 img {border:0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap3 i {display:block; width:320px; height:213px; position:absolute; left:-320px; top:-213px; z-index:1; background:#000;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap3 p {display:block; width:320px; height:213px; position:absolute; left:-320px; top:-213px; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap3 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap3 p span {display:block; padding:10px; line-height:20px;}
.wrap3 a:hover {direction:ltr;}
.wrap3 a:hover img {margin-top:213px; margin-left:320px;}
.wrap3 a:hover i {top:0; left:0;}
.wrap3 a:hover p {top:0; left:0}
4. Membuat informasi gambar dengan efek slide pop up samping.wrap4 {clear:left; width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px 0 50px; float:left;}
.wrap4 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap4 img {border:0;}
.wrap4 i {display:block; width:160px; height:213px; position:absolute; left:320px; top:0; z-index:1; background:#000; filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); opacity:0.40;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap4 p {display:block; width:213px; height:213px; position:absolute; left:320px; top:0; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.wrap4 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap4 p span {display:block; padding:10px; line-height:20px;}
.wrap4 a:hover {direction:ltr;}
.wrap4 a:hover i {left:160px;}
.wrap4 a:hover p {left:170px;}
5. Membuat informasi gambar dengan efek setengah slide samping
.wrap5 {width:320px; height:213px; position:relative; overflow:hidden; font-family:arial, sans-serif; border:0; margin:0 10px; float:left;}
.wrap5 a {display:block; width:320px; height:213px; text-decoration:none; color:#000;}
.wrap5 img {border:0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap5 i {display:block; width:160px; height:213px; position:absolute; left:-160px; top:0; z-index:1; background:#000;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap5 p {display:block; width:160px; height:213px; position:absolute; left:-160px; top:0; z-index:1; background:transparent; font-size:12px; color:#fff; padding:0; margin:0; line-height:16px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.wrap5 p b {display:block; font-size:22px; color:#fc0; text-align:left; margin:0; padding:0 10px; line-height:30px;}
.wrap5 p span {display:block; padding:10px; line-height:20px;}
.wrap5 a:hover {direction:ltr;}
.wrap5 a:hover img {margin-left:160px;}
.wrap5 a:hover i {left:0;}
.wrap5 a:hover p {left:0;}
Penerapan HTML
<div class="wrap1">
<a href="#">
<img src="url gambar" alt="" />
<p> <b>Judul</b>
<span>Deskripsi tentang gambar</span>
</p>
</a>
</div>
<div class="wrap2">
<a href="#">
<img src="url gambar" alt="" />
<p> <b>Judul</b>
<span>Deskripsi tentang gambar</span>
</p>
</a>
</div>
<div class="wrap3">
<a href="#">
<img src="url gambar" alt="">
<p> <b>The Mini</b>
<span>Deskripsi tentang gambar</span>
</p>
</a>
</div>
<div class="wrap4">
<a href="#">
<img src="url gambar" alt="">
<p> <b>Judul</b>
<span>Deskripsi tentang gambar</span>
</p>
</a>
</div>
<div class="wrap5">
<a href="#">
<img src="url gambar" alt="">
<p> <b>Judul</b>
<span>Deskripsi tentang gambar</span>
</p>
</a>
</div>
0 komentar:
Posting Komentar