Menampilkan Teks Pada Gambar Efek Berputar - Efek Rotasi/Berputar pada gambar merupakan salah satu dari sekian banyak ragam efek gambar yang digunakan oleh banyak blog untuk sekedar menghias tampilan gambar pada postingan. Kali ini SAHABAT BLOGGER 77 kembali mengulas efek tersebut namun dengan tampilan yang berbeda, Desain efek sama tetapi pada style efek saya menggunakan CSS transisi-delay dan transisi:ease-out sehingga tampilan gambar akan berputar lalu menghilang dan digantikan dengan menampilkan teks yang berada dibalik gambar.




DEMO SHOW



Pada artikel sebelumnya, saya mendesain gambar dengan efek zoom serta menampilkan teks yang berada dibalik gambar, sehingga ada beberapa pertanyaan dari +Aldino Sya yang kurang lebih seperti ini


Image Profile

Aldino Sya 02 Mei, 2014
hahaha..gambarnya ikut jg lengket di ats gambar admin..salah tempat, klw liat efek ini Mba ane jd berhayal, bisa tidak efek diputar..?

misal gambarnya sebagai footer blog sedang tulisan yg keluar dari balik gambar tsb. dijadikan form komentr, menjadi "efek slide form komentar footer", ,, maksi Ya Adm C****k, ..! ats tutornya, mw blik dulu..!


Untuk menjawab pertayaan beliau, saya menggunakan 2 CSS berbeda yaitu CSS untuk mengatur tampilan pada efek gambar dan CSS pembangun style show teks, sehingga gambar akan terlebih dahulu berputar dan menghilang selanjutnya teks yang akan tampil menggantikan gambar, agar tampilannya berbeda pada CSS descripsi saya membuat teks link sebagai penutup/akhir teks seperti pada gambar berikut

Image Rotasi Effect


Efek Default In Article - Kumpulan Ragam Efek Pada Gambar


.view-rotasi img {
   -webkit-transition: all 0.5s ease-out;
   transition: all 0.5s ease-out;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}

.view-rotasi .mask {
   background-color: rgba(77,44,35,0.5);
   -webkit-transform: rotate(0deg) scale(1);
   transform: rotate(0deg) scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;}

.view-rotasi h2 {
   -webkit-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}

.view-rotasi p {
   -webkit-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}

.view-rotasi a.info {
   -webkit-transform: translateY(-200px);
   transform: translateY(-200px);
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}

.view-rotasi:hover img {
   -webkit-transform: rotate(720deg) scale(0);
   transform: rotate(720deg) scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;}

.view-rotasi:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px) rotate(0deg);
   transform: translateY(0px) rotate(0deg);
   -webkit-transition-delay: 0.4s;
   transition-delay: 0.4s;}

.view-rotasi:hover h2 {
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.7s;
   transition-delay: 0.7s;}

.view-rotasi:hover p {
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.6s;
   transition-delay: 0.6s;}

.view-rotasi:hover a.info {
   -webkit-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.5s;
   transition-delay: 0.5s;}

.view {
   width: 300px;height: 200px;
   margin: 10px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   background: #fff url(http://URL-bg(image).jpg) no-repeat center center;}

.view .mask,.view .content {
   width: 300px;height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;left: 0;}

.view img {display: block;position: relative;}
.view 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;}

.view p {
   font-family: Georgia, serif;
   font-style: italic;
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;}

.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 5px 10px;
   background: #000;
   color: orange;
   margin: -1.8em 0 0 0;
   text-transform: uppercase;}


<div class="view view-rotasi">
<img src="http://URL-Gambar Anda.jpg" /> 
    <div class="mask">
      <h2>Sahabat blogger 77</h2>
         <p>
           ....
Tulis Teks Anda Disini
           ....
         </p>
<a class="info" href="#">Click Me</a>
    </div>
</div>


Semoga tutorial ini dapat membantu sahabat semua dalam berinspirasi.
Terimakasih dan Selamat bermalam minggu for all...!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Menampilkan Teks Pada Gambar Efek Berputar
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

20 komentar

  1. Unik dan menarik effects berputar nya Mbak Devy
    saya coba yah kaya nya cocok di blog saya makasih Mbak :)

    BalasHapus
  2. Wah Mas Aldino yang reques saya yang
    Ngeduluin pertamax nya yah Mbak Devy..
    Terima kasih deh atas tutorial keren ini :-d

    BalasHapus
    Balasan
    1. Mas Saud, diambil pertamax-nya,, hati2 aj Mas..ntar ada copet, jd pertamaxnya di simpan di dlm kantung aj..:)

      Hapus
    2. iya bang saud,kemarin mas aldino tukang culik,sekarang mau jadi tukang copet dech,,hehe

      Hapus
  3. saya ijin ikutan praktek yia bos, cantik banget sih, hehehe...

    BalasHapus
  4. wah keren banget nih oke saya coba kalau begitu.

    Saya mau nanya kenapa menu wrapper saya cuma welcome to my blog aja yang turun naik nah apa yang harus diperbaiki, makasih neng geulis

    BalasHapus
    Balasan
    1. penenmpatan kode logo dan teks welcome itu secara manual mas,bukan pada CSS pembangunnya, jadi tempatkan diwilayah selector pembentuk HTML navigasinya agar sejajar dengan teks <li>
      sehingga posisinya menjadi fixed (melayang)

      Hapus
  5. lincah demonya mba..!, mirip klw lagi reload peluru di gem PB..:), panjang jg cssnya Ya mba..pertanyaan 4 baris bisa jd seperti ini,.Tp ,ttp keren,..!

    BalasHapus
    Balasan
    1. hmmm...selain ngeblog berarti suka Game PB juga neh,,hehe

      CSS diatas sengaja saya susun memanjang kebawah agar lebih memudahkan dalam pengeditan mas,kalau sudah beres dan OK silahkan mas hapu kode spasi dan <br/> agar sejajar,
      jadi kodenya menjadi singkat

      Hapus
  6. keren mbak jadinya,, berkarya terus mbak

    BalasHapus
  7. saya pernah juga mbak pake CSS ini... mang keren banget mbak...

    ini blog bagus sekali sebagai tempat pembelajaran.... :>)

    BalasHapus
  8. lihat demonya kayak sulap yambak,keren banget

    BalasHapus
  9. Demonya keren banget. kode CSS sungguh luar biasa. kode ini yang aku cari. tinggal mencari model template galerinya. terimakasih.

    BalasHapus
  10. wah keren juga ya, tapi untuk sekarang saya masih malas utak-utik template lagi sob hehehe

    BalasHapus
  11. luar biasa banyak juga ya kode script nya, jadi tambah keren kalau efek berputar nya ;)

    BalasHapus
  12. bagus seklai mbak gambarnya,tuh pasangya dimana yah mbak.

    BalasHapus
    Balasan
    1. dimana sesuka hati mas,jika ingin membuat gambar postingan seperti efek diatas tinggal salin kodenya lalu letakkan jika akan membuat artikel mode tulis HTML

      Hapus
  13. super banget mbak devi, saya pengen coba, tapi bingung mau diterpkan untuk elemen yang mana hehe

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK