Membuat Efek Muncul Teks Deskripsi Pada Gambar

Membuat Efek Muncul Teks Deskripsi Pada Gambar - Gambar merupakan dekorasi tambahan yang menarik untuk website atau blog, dari gambar yang jelek sampai bagus semuanya memiliki arti tersendiri bagi pemilik website tersebut.

Untuk postingan kali ini saya akan membahas tentang Membuat efek muncul teks deskripsi pada gambar dalam arti saat kita melakukan Mouse Over atau menggeser mouse kita ke gambar otomatis gambar tersebut akan mengeluarkan deskripsi.

Cara Pembuatan Efek Memunculkan Teks Saat Kursor Menyentuh Gambar:

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script css berikut ini tepat di atas kode ]]></b:skin> atau </style>

.ukuran-img {height:500px;width:200px;}
.blogalvinwarasi img {
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}
.blogalvinwarasi .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;}
.blogalvinwarasi 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;}
.blogalvinwarasi p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}
.blogalvinwarasi a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition: all 0.5s ease-in-out;}
.blogalvinwarasi: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;}
.blogalvinwarasi:hover img {
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   transition-delay: 0s;}
.blogalvinwarasi:hover h2,
.blogalvinwarasi:hover p,
.blogalvinwarasi: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 biru untuk tinggi gambar yang akan ditampilkan
• Kode warna orange untuk panjang gambar

Penerapannya:

Masukkan kode HTML di bawah ini ke dalam postingan blog Anda.

<div class="lihat blogalvinwarasi">
  <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>

Mudah kan caranya ?.. dengan cara ini Anda bisa membuat sebuah karya yang menarik, dan tentunya sekarang Anda dapat satu ilmu lagi yang akan bermanfaat untuk Anda bloteng semua.

Selamat mencoba dan semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250