Cara Membuat Teks Animasi Muncul Pada Saat Gambar Disorot Mouse

Cara Membuat Teks Animasi Muncul Pada Saat Gambar Disorot Mouse

Posted by Robi Armansyah
Membuat Efek Teks Animasi Muncul Pada Saat Gambar Disorot oleh Mouse, saya juga tidak yakin anda akan menggunakannya untuk gallery foto atau sekedar kreasi tambahan atau ingin meletakan gambar dengan Efek Teks Animasi Muncul Pada Saat Gambar tersebut Disorot oleh Mouse ke dalam Postingan, silahkan copy paste kode dibawah pada HTML Postingan Blog.

Cara Membuat Teks Animasi Muncul Pada Saat Gambar Disorot oleh Mouse
Silahlkan copy paste kode CSS dan HTML berikut ke halaman atau pada HTML blog maupun web.
<style type='text/css'>
#bt_imageeffect {
   margin: 20px auto;
  width: 100%;min-height: 300px; padding: 20px 0;
  text-align: center;
 }
.galleryItem {
 display: inline-block;;
 position: relative;
 width: 250px; height: 250px;
 padding: 0;margin: 0 20px;
 border: solid 10px #fff;

 -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
 box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galleryItem img {
 width: 250px;height: 250px;
}
.caption {
 position: relative;
 display: inline-block;
 width: 250px; height: 250px;
 z-index: 10;
}
.caption::before {
 content: attr(data-title);
 position: absolute;top: 0; left: 0;
 width: 250px; height: 0;
  font-family: 'Roboto', Roboto;
 font-size: 1.8em;font-weight: 600;
 line-height: 1.4em;color: #086FA1;
 background: #fff;
 overflow: hidden;
 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption::after {
 content: attr(data-description);
 position: absolute;
 bottom: -0;left: 0;
 width: 250px;height: 0;
  font-family: 'Roboto', Roboto;
 font-size: 1.1em;
 font-weight: 400;
 line-height: 1.4em;color: #fff;
 background: #222;
 overflow: hidden;

 -webkit-transition: all 0.9s ease;
 -moz-transition: all 0.9s ease;
 -ms-transition: all 0.9s ease;
 -o-transition: all 0.9s ease;
 transition: all 0.9s ease;
}
.caption:hover::before {
 height: 125px;
}
.caption:hover::after {
 bottom: 0;height: 125px;
}
</style>

<div id="bt_imageeffect">
<li class="galleryItem">
  <a class="caption" data-description="Claritas est etiam processus dynamicus, qui sequitur mutationem
 consuetudium lectorum." data-title="Nature Scene" href="Link Disini Jika Di inginkan">
  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzM1pObjp5WzC083T1yPcY415as0oVhNQfcTqJK8v3Y7FmuCPE1AfTXzgHZUMjk-fOfAauKa49NTME-NnQbaiIQW4VEUGw47L10xA2l3ENCcHxeJcM3wPIAMfZd7eREz0wli_CAAuuMeE8/s1600/4.jpg"/>
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Claritas est etiam processus dynamicus, qui sequitur mutationem
 consuetudium lectorum." data-title="SunFlower" href="Link Disini Jika Di inginkan">
  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-9e6VSVfthr2CUrwyH322fELnnMeiVpwoTgSwjXp45kOGXNX7PykHMB_Wvtj1M_MXsWA9-cC8kMZ-wNypBngKPeSmwR1ZQBy2QgINdPOs15uL5G6UPoK1xZD58Xg-zRE1UU7wrnSWqMb/s1600/14.JPG" />
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Claritas est etiam processus dynamicus, qui sequitur mutationem
 consuetudium lectorum." data-title="Nature Scene" href="Link Disini Jika Di inginkan">
  <img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghy_JkhV0yzshNSKurqliYjjsEiWyoIOHxUASqsmKm8XMJcQSKdWgFFkhgDHj-0voACiMYcWc30HKkZ-crWEBVlWUX18HWjIHK3Xw80keUsfB2ct4oyVpZNgJGoCok-Vsar6bd0l9l-jwD/s1600/2.JPG"/>
  </a></li>
<li class="galleryItem">
  <a class="caption" data-description="Claritas est etiam processus dynamicus, qui sequitur mutationem
 consuetudium lectorum." data-title="SunFlower" href="Link Disini Jika Di inginkan">
  <img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieglPv_UAdqmwpDnYOXfHZWtbfcEB3ZTr8wiEimNuD8PxQAd-A0CmotJ46TQDRz6fvjuhFAeu6nm9WvDD66dHXlwgqtXZE-f3zAhhxCg-_o8nmoAMbKH0QE13fqg2JqXTyQEwEsFFKQKxa/s1600/PINK1.jpg" />
  </a></li>
</div>
Keterangan
Ungu : Teks keterangan gambar
Orange : Link pada saat gambar di klik
Merah : URL Gambar yang ingin di pajang

Ditulis Oleh : Robby Armansyah

DMCA.com Protection StatusAnda baru saja membaca artikel dengan judul Cara Membuat Teks Animasi Muncul Pada Saat Gambar Disorot Mouse. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.
✚

2 komentar

Subscribe to:Post Comments (Atom)