Membuat efek muncul teks deskripsi pada gambar ~ blog sepot

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,...

Terima kasih telah membaca artikel tentang Membuat efek muncul teks deskripsi pada gambar di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.