Cara membuat efek gambar pada HTML

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.
Cara membuat Efek Gambar
Apa yang pertama dipersiapkan?
Pertama adalah Kode CSS. Copy dan paste kode CSS ini pada bagian CSS style. Jika HTML sobat sudah terdapat h1 h2 h3 ... dan seterusnya, silahkan hapus item dibawah ini.
#page-events{background:#212121;color:white}
a{color:#ffffff;text-decoration:none}
.text-center{text-align: center}
/* Bagian kolom */
.fullwidth{display:table;width:100%;table-layout:fixed;border-collapse:collapse;padding:0 !important;margin:0 !important;overflow:hidden}
.one-fourth{width:24.9%;display:table-cell;vertical-align:middle}
.one-third{width:33.3%;float:left}
.three-fourth{width:74.9%;height:100%;display:table-cell}
.poster{display:block;position:relative;color:#fff;margin-bottom:-5px;overflow:hidden}
.poster img{box-shadow:0 0 0 #fff;width:100%}
.poster-caption{transition:0.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)}
.poster:hover .poster-caption{top:0}
.poster:hover p{height:auto}
.poster-title{font-size:56px;line-height:56px;font-weight:bold;margin-bottom:3px}
.poster-title:first-letter{color:#607D8B}
.poster p{overflow:hidden;line-height:1.1;margin-bottom:24px}
.poster .btn{padding:10px 20px 16px;margin-top:0;text-decoration:none;background-color:#607D8B}
/* Modifikasi kolom */
.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.
<div class='image-risch'>
<section class='no-padding' id='page-events'>
<div class='fullwidth'>
<div class='one-fourth text-center'>
<div class='title-area wow slideInLeft'>
<span>Allbum</span>
<h1>Events</h1>
</div>
</div>
<!-- Photo grid -->
<div>
<div class='col-md-6'><div class='poster'>
<img alt='A girl, and a train passing' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg'/>
<div class='poster-caption'>
<div class='poster-title'>Demo 2</div>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class='btn' href='#'>See all collections</a>
</div></div>
</div>
<div class='col-md-6'><div class='poster'>
<img alt='Quiet day at the beach. Cold, but beautiful' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg'/>
<div class='poster-caption'>
<div class='poster-title'>Demo 3</div>
<p>Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a class='btn' href='#'>See all collections</a>
</div></div>
</div>
</div>
</div>
</section>
</div>
<!-- End page content -->
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.
Apakah tutorial ini sudah diuji coba?
Iya nih : Cara Membuat Efek Gambar Pada HTML. Tips dan trik blog ini sudah kami coba di Editor Area adalah free editor, tips, trik blog, template blogger, HTML editor, CSS editor, dukungan JavaScript dan disediakan juga contoh kami membuat template dalam sekali pratinjau.
Semoga Bermanfaat, Terimakasih.
Tentang kami
EditorArea adalah cara kami untuk mengolah dan berkreasi dalam membuat template yang kami tambahkan untuk menyempurnakan template ataupun website kreasi kami. Harap di ketahui bahwa Editor Area ini tidak semua pengkodean dapat mendukung untuk versi Blogger template, silahkan kunjungi HelpSite kami untuk mengetahui lebih banyak. Harapan kami, tutorial yang kami sajikan dengan perhatian yang seringas-ringkasnya dapat mudah dimengerti dan dipelajari. Kritik, saran ataupun masukan pada post kami, sangatlah kami perlukan untuk belajar bersama-sama dan berkreasi bersama. Free reading untuk memberi perhatian penuh bersamamu. Semoga bermanfaat. Happy Reading.

No comments:

Kirim komentar ke teman

Informasi yang Anda berikan pada formulir ini tidak akan digunakan untuk apa pun selain mengirim komentar ke teman Anda. Fitur ini tidak akan digunakan untuk iklan atau promosi diri yang berlebihan.