Cara membuat efek gambar pada website

Bagimana tips dan trik blog membuat efek gambar pada HTML? Dibawah ini sekedar contoh tutorial membuat blog gratis, tips dan trik blog, template blogger, seo blog membuat Efek Gambar pada HTML. Efek gambar ini akan aktif saat cursor terletak pada area gambar dan menampilkan efek slide lembut dan sempurna. Ini lebih mudah, karena tidak menggunakan JavaScript untuk menciptakan efek interaktif pada browser web.

Apa kelebihan dengan menambahkan efek gambar pada HTML?

Kode ini sangat cocok untuk mempercantik tampilan web, seperti: travel, properti dan mancakup desain template yang kaya dengan fitur foto. Kelebihan efek gambar ini dilengkapi dengan latar belakang transparan disertai judul, snippet post dan tombol link yang mengarah pada artikel tertentu. Tentunya responsif untuk digunakan pada HTML. Gunakan kode CSS dan HTML di bawah ini.

Apa yang pertama dipersiapkan?

Pertama adalah Kode CSS. Copy dan paste kode CSS ini pada bagian CSS style.

23
 
1
/*-- Bagian Bar --*/
2
body{margin:0;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
3
#page-events{background:#171717;color:#fff}
4
a{color:#fff;text-decoration:none}
5
.text-center{text-align:center}
6
​
7
/* Bagian kolom */
8
.fullwidth{display:table;width:100%;table-layout:fixed;border-collapse:collapse;padding:0!important;margin:0!important;overflow:hidden}
9
.one-fourth{width:24.9%;display:table-cell;vertical-align:middle}
10
.one-third{width:33.3%;float:left}
11
.three-fourth{width:74.9%;height:100%;display:table-cell}
12
.poster{display:block;position:relative;color:#fff;margin-bottom:-5px;overflow:hidden}
13
.poster img{box-shadow:0 0 0 #fff;width:100%}
14
.poster-caption{transition:.5s ease;font-size:17px;line-height:27px;position:absolute;display:block;top:100%;left:0;right:0;bottom:0;padding:21px 55px 30px 34px;background:rgba(0,0,0,0.51)}
15
.poster:hover .poster-caption{top:0}
16
.poster:hover p{height:auto}
17
.poster-title{font-size:56px;line-height:56px;font-weight:700;margin-bottom:3px}
18
.poster-title:first-letter{color:#607D8B}
19
.poster p{overflow:hidden;line-height:1.1;margin-bottom:24px}
20
.poster .btn{padding:10px 20px 16px;margin-top:0;text-decoration:none;background-color:#607D8B}
21
​
22
/* Modifikasi kolom */
23
.col-md-6{padding:0px}

Apa saja kode yang perlu dipersiapkan?

Kedua adalah kode HTML. Paste kode HTML di bawah pada bagian body. Ubah latar belakang dengan warna yang sesuai dengan tema template. Silahkan ubah latar belakang "page-events". Kemudian bagaimana cara merubah huruf awal pada judul? Lakukan setting pada "poster-title:first-letter", pada "color" sesuaikan warna yang paling disukai.

36
 
1
<!-- Bagian: HTML Body -->
2
<div class='image-risch'>
3
    <section class='no-padding' id='page-events'>
4
        <div class='fullwidth'>
5
            <div class='one-fourth text-center'>
6
                <div class='title-area wow slideInLeft'>
7
                    <span>Allbum</span>
8
                    <h2>Events</h2>
9
                </div>
10
            </div>
11
            <div>
12
                <div class='col-md-6'>
13
                    <div class='poster'>
14
                        <img alt='Text' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' />
15
                        <div class='poster-caption'>
16
                            <div class='poster-title'>Demo 2</div>
17
                            <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
18
                            <a class='btn' href='#'>See all collections</a>
19
                        </div>
20
                    </div>
21
                </div>
22
                <div class='col-md-6'>
23
                    <div class='poster'>
24
                        <img alt='Text' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbShTlF04nHki4-FkxrqWdB2lvpb37DsveiFHO0FoFrabdamdVSin0-leeiI6b8qc4ObZNQQu9VNdIIV_Nu_QDrIPbQWQm4ZBgmooZj5SNZi4ovpquYrwWqedIJg-zTeKQZwsX3pf16KdP/s0/example-img-ujicode.jpg' />
25
                        <div class='poster-caption'>
26
                            <div class='poster-title'>Demo 3</div>
27
                            <p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
28
                            <a class='btn' href='#'>See all collections</a>
29
                        </div>
30
                    </div>
31
                </div>
32
            </div>
33
        </div>
34
    </section>
35
</div>
36
<!-- Akhir dari bagian HTML -->

Bagaimana membuat tata letak kolom?

Ketiga adalah pembuatan tata letak kolom. Selanjutnya kita membuat empat kolom gambar responsif yang berbeda dengan Kolaborasi HTML diatas dengan penambahan item HTML yang paling populer dari "Bootstrap" atau kode-kode yang dikembangkan oleh Twitter. Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website. Contoh diatas menggunakan "col-md-6" yang sudah dimodifikasi dengan 4 gambar. Gunakan kode "col-md-4" untuk gaya 3 kolom gambar. Jika sobat ingin menambah gambar lebih, silahkan rubah pengaturan "col-md-6" menjadi "col-md-5, 4, 3 ataupun col-md-2 untuk menyesuaikan halaman template pada container. sobat juga dapat membuat Efek Gambar satu kolom saja, dengan menambahkan pengaturan (padding:0) pada CSS style.

Jika langkah diatas sudah selesai, silahkan simpan template, kemudian pratinjau hasil editing sobat pada HTML.

Silahkan baca juga tentang: Cara Membuat Beberapa Kolom Gambar. Sobat akan membuka judul ini di link baru.

Apakah tutorial ini sudah diuji coba?

Iya nih: Cara membuat efek gambar pada website. Tips dan trik blog ini sudah kami coba di Editor WebXCode adalah free editor, tips, trik blog, HTML editor, CSS editor, dukungan JavaScript dan disediakan juga contoh kami membuat template dalam sekali pratinjau.
Semoga Bermanfaat, Terimakasih.