Membuat Efek gambar dengan sliding keterangan

Oleh Unknown

Jumat, 11 Juli 2014

Bagikan :

Tweet

Sahabat Kang PP, Alhamdulillah saya bisa kembali posting tentang Tutorial Blog setelah beberapa hari absen karena sibuk memodifikasi template, sekarang Bagus Tidak Tampilan Blog Kang PP ? hehehe.

Kali ini Kang PP akan share tutorial asli buatan Kang PP, apa itu ? Ya, efek gambar dengan sliding keterangan atau infonya. Kurang lebih penampakan demonya seperti berikut :

Ieu Gambar
Gambar ini merupakan logo Blog Kang PP. Mohon berkomentar dibawah ya ^_^

Berikut Langkah-langkah membuatnya :

Kode CSS :

    #gambarna{
    float: left;
    margin: 10px;
    overflow: hidden;
    position: relative;
    }
    .infona{
    width: 80%;
    text-align: left;
    padding: 5px 10px;
    background: #FFEC5D;
    color: #000;
    line-height: 18px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif; 
    -webkit-border-radius: 15x 0px 15px 0px;
    -moz-border-radius: 15px 0px 15px 0px;
    -o-border-radius: 15px 0px 15px 0px;
    border-radius: 20px 0px 15px 0px;
    }
    #gambarna .infona {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -300px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
    }
    #gambarna:hover .infona{
    margin-right: 0px;
    }

Kode Html :

    <div id="gambarna">
    <img src="Url Gambarmu" />
    <div class="infona">
    <b>Judul Gambar</b><br />
    Keterangan Gambar.  Mohon berkomentar dibawah ya ^_^
    </div>
    </div>

Selesai

Keterangan
Sahabat bisa simpan di atas kode ]]></b:skin> atau </style> .  Untuk penempatan kode Html itu tergantung penempatannya, bisa di sidebar atau pun lainnya.

Jika menyimpan kode CSSnya di ]]></b:skin> atau </style> anda tidak perlu menempatkan kembali kode cssnya. Tinggal memanggilnya dengan kode Html.

Semoga bermanfaat ^_^ dan budayakan berkomentar setelah membaca artikel.
 

Tag : Tutorial Blog