Membuat efek muncul teks deskripsi pada gambar

Untuk postingan kali ini saya akan membahas tentang Membuat efek muncul teks deskripsi pada gambar dalam arti saat kita melakukan Mouse Over atau meggeser mouse kita ke gambar otomatis gambar tersebut akan mengeluarkan deskripsi.
Lebih jelas nya silahkan sobat geser mouse sobat ke gambar di bawah ini.

Blog Irvan Efendy

Ini adalah contoh tutorial membuat teks deskripsi pada gambar


Read More

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.ukuran-img {height:200px;width;}
.blogirvanefendy img {
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}
.blogirvanefendy .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transform: scale(0) rotate(-180deg);
   transition: all 0.4s ease-in;
   border-radius: 0px;}
.blogirvanefendy h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   transition: all 0.5s ease-in-out;}
.blogirvanefendy p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}
.blogirvanefendy a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}
.blogirvanefendy:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   transform: scale(1) rotate(0deg);
   transition-delay: 0.2s;}
.blogirvanefendy:hover img {
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition-delay: 0s;}
.blogirvanefendy:hover h2,
.blogirvanefendy:hover p,
.blogirvanefendy:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   transition-delay: 0.5s;}
.lihat {
   width: 300px;
   height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #F5F5F5;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(..Gambar-background.jpg) no-repeat center center;}
.lihat .mask,.lihat .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
left: 0;
color: #FFF;
}
.lihat img {display: block;position: relative;}
.lihat h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
   border-bottom: 2px solid #FF0000;}
.lihat p {
   font-family: Arial, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;}
.lihat a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #222;
   color: #fff;
   text-transform: uppercase;
   box-shadow: 0 0 1px #000;}
.lihat a.info: hover {background-color: #222;box-shadow: 0 0 5px #000;}

• Kode warna ungu untuk tinggi gambar yang akan di tampilkan
• kode warna orange untuk panjang gambar 

Penerapannya:

Masukan kode HTML di bawah ini ke dalam postingan blog sobat.

<div class="lihat blogirvanefendy">
  <img class='ukuran-img' src="...URL images  anda.png" />
  <div class="mask">
    <h2>
      ...teks judulnya
    </h2>
  </br>
  ....teks diskripsi
</br>
</br>
<a class="info" href="#">
  Read More
</a>
</div>
</div>

• Kode berwarna hijau adalah untuk link gambar anda
• Kode berwarna biru untuk judulnya
• Kode berwarna merah untuk deskripsinya 

Simple kan cara nya,..??

Selamat mencoba dan semoga berhasil,...

Membuat efek muncul teks deskripsi pada gambar 2014-04-23T10:07:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown