Menampilkan Teks Pada Gambar Efek Berputar

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

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

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