Cara Membuat Efek Gambar Pada HTML

Bagimana cara membuat Efek Gambar pada HTML? Dibawah ini sekedar contoh cara 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.
Kelebihan
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
Pertama: Kode CSS
Copy dan paste kode CSS ini pada bagian CSS style. Jika HTML anda sudah terdapat h1 h2 h3 ... dan seterusnya, silahkan hapus item dibawah ini.
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
#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;overflow:hidden}
.poster img{box-shadow:0 0 0 #fff}
.poster-caption{transition:0.5s ease;-o-transition:0.5s ease;-webkit-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:aut}
.poster-title{font-size:56px;line-height:56px;font-weight:bold;margin-bottom:3px}
.poster-title:first-letter{color:#607D8B}
.poster p{overflow:hidden;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}
Kedua: 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.
<!-- Page content -->
<div class="" style="width:100%;margin-top:50px">
<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 src="https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg" style="width:100%" onclick="onClick(this)" alt="A boy surrounded by beautiful nature">
<div class="poster-caption">
<div class="poster-title">Demo 1</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 href="#" class="btn">See all collections</a>
</div></div>
</div>
<div class="col-md-6"><div class="poster">
<img src="https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
<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 href="#" class="btn">See all collections</a>
</div></div>
</div>
<div class="col-md-6"><div class="poster">
<img src="https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
<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 href="#" class="btn">See all collections</a>
</div></div>
</div>
<div class="col-md-6"><div class="poster">
<img src="https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
<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 href="#" class="btn">See all collections</a>
</div></div>
</div>
</div>
</div>
</section>
</div>
<!-- End page content -->
</div>
Ketiga: 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" 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 anda ingin menambah gambar lebih, silahkan rubah pengaturan "col-md-6" menjadi "col-md-5, 4, 3 ataupun col-md-2 untuk menyesuaikan halaman template (container). Anda 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 pada HTML.

Comments