Cara Membuat Beberapa Kolom Gambar

Tips membuat beberapa kolom gambar atau foto pada blog atau website responsif. Pada post sebelumnya sudah ada tutorial "Cara Membuat Efek Gambar Pada HTML" responsif. Nah, dibagian ini tidak jauh berbeda pada post sebelumnya. Cara kali ini adalah meletakan beberapa kolom gambar menggunakan metode kode "ul li". Jika dibandingakan pada post sebelumnya, cara kedua ini sedikit banyak kode pada gaya CSS, tapi anda dapat meringkas dan menghapus beberapa gaya CSS kode dibawah ini.
Cara Membuat Beberapa Kolom Gambar
Pertama: Kode CSS
Gunakan code bootstrap.min.css! Link tujuan ini adalah untuk merespon btn tombol dan tipe font saja. Jika pada CSS style template anda sudah terdapat kode perintah btn, anda dapat mengunakan gaya CSS yang sudah tersedia.
Copy dan paste kode CSS ini pada bagian CSS style.
#epictravelersbanner{background-color:#fff;padding:0;margin-top:0;margin-bottom:0;overflow:hidden;position:relative;z-index:3}
#epictravelersbanner .admin_banblock ul{padding:0;margin:0;list-style:none;overflow:hidden}
@media (min-width:320px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul{margin:0}}
#epictravelersbanner .admin_banblock ul li{position:relative;padding:0;margin:0;background:rgba(51,51,51,0);overflow:hidden;transition:all .2s ease-in}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li{margin-bottom:0}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li{margin-bottom:0}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li{padding:0;width:100%!important;margin-bottom:0;min-height:1px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li{width:100%!important;margin-bottom:0;padding:0;min-height:1px}}

#epictravelersbanner .admin_banblockul li.animated{animation-fill-mode:inherit}
#epictravelersbanner .admin_banblockul li:before{transition:all .2s ease-in}
#epictravelersbanner .admin_banblock ul li.item-3 .caption .txt-e strong{color:#575F66}
#epictravelersbanner .admin_banblock ul li.item-3 .caption .txt-epic{color:#fff}
#epictravelersbanner .admin_banblock ul li a{display:block;overflow:hidden;position:relative;text-align:right;height:100%}
#epictravelersbanner .admin_banblock ul li a .banner_img{text-align:right;display:block}
#epictravelersbanner .admin_banblock ul li a .banner_img img{position:relative;top:0;right:0;width:100%;height:auto;opacity:1;transition:all .2s ease-in}

@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .banner_img img{width:100%}}
#epictravelersbanner .admin_banblock ul li a .caption{position:absolute;top:0;display:block;font-size:0;left:0;line-height:0;width:100%;height:100%;text-align:left;transition:all .2s ease-in}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption{min-height:0}}
@media (min-width:320px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption{min-height:0}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-e{display:block;font-size:31px;line-height:32px;color:#276508;font-weight:400;text-transform:uppercase;padding:26px 0 0 40px;transition:all .2s ease-in}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;min-height:0}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:26px;min-height:0}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;padding:20px 0 0 20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner.admin_banblock ul li a.caption.txt-e{font-size:18px;line-height:30px;padding:20px 0 0 20px}}

#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:25px;line-height:50px;display:block;color:#fff;float:none;position:relative;top:0;font-weight:700;letter-spacing:0}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:36px;line-height:38px;letter-spacing:-2px}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:60px;line-height:68px;letter-spacing:0}#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{padding-left:20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-e strong{font-size:30px;line-height:32px;letter-spacing:0}#epictravelersbanner .admin_banblock ul li a .caption .txt-e{padding-left:20px}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px;color:#fff;font-weight:300;text-transform:none;display:block;padding:0 0 0 40px;max-width:570px}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{padding:10px 0 0 40px}}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:18px;line-height:25px}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-epic{font-size:16px;line-height:20px;padding:10px 0 0 20px}}
#epictravelersbanner .admin_banblock ul li a .caption .txt-u{display:inline-block;text-transform:uppercase;border:none;font-size:21px;line-height:30px;font-weight:700;color:#fff;background:#171717;position:absolute;margin:0 40px;bottom:40px;transition:all .2s ease-in}
@media (min-width:1200px) and (max-width:1750px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{font-size:18px;line-height:30px;padding:10px 20px}}
@media (min-width:992px) and (max-width:1199px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px}}
@media (min-width:768px) and (max-width:991px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px}}
@media (min-width:480px) and (max-width:767px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{bottom:20px;left:20px;font-size:18px;line-height:30px;padding:10px 20px}}
@media (min-width:320px) and (max-width:479px) {#epictravelersbanner .admin_banblock ul li a .caption .txt-u{display:none}}
@media (max-width:767px) {#site-brand{display:none}#epictravelers-wow{display:none}}
#epictravelersbanner .admin_banblock ul li:hover .caption .txt-u{background:#276508}
#epictravelersbanner .admin_banblock ul li:hover img{opacity:.8!important}
#epictravelersbanner .mod_custom{overflow:hidden;width:100%}
#epictravelersbanner .mod_custom .custom > div{padding:0;min-height:490px;overflow:hidden}
Kedua: kode HTML
Paste kode HTML di bawah pada bagian body. Anda juga dapat memanfaatkan kode ini untuk halaman post utama atau desain template yang kaya dengan fitur foto.
HTML dibawah ini sudah tersedia tiga kolom gambar untuk di ujicoba menggunakan HTML-Editor. Rata kiri dan kanan adalah 0px, sehingga fullscreen. Selain itu pertahankan menggunakan kode col-md-4 col-lg-4 col-sm-6 untuk gaya terpisah pada kolom.
<div id='epictravelersbanner'><div class='admin_banblock'><div class='module_content'><div class='banner_block content_first'>
<ul class='listing__banners'>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
<li class='col-md-4 col-lg-4 col-sm-6 item banner item-1 adress-element delay1'><a href='#' title='Image'><div class='banner_img'><img alt='Image' height='323' src='https://2.bp.blogspot.com/-wqPUyowzAO8/Wo4b52Q_l3I/AAAAAAAAALE/Mmqv4qnLpZcQ0Ij07KX7PEdnyWm73I5LACLcBGAs/s1600/DSC_001.jpg' title='image' width='500'/></div><div class='caption'>
<div class='box-caption'>
<div class='txt-e'>Label Post <strong>Title Post </strong></div>
<div class='txt-epic'>Amazing! Hidden wonders of nature. What you see in the picture? This is a very long journey in collecting and a beautiful adventure.</div><div class='txt-u btn btn-primary'>Keep Reading</div></div></div></a></li>
</ul>
</div></div></div></div>
Jika langkah diatas sudah selesai, silahkan simpan template. Kemudian pratinjau hasil editing pada HTML. Sangat mudah bukan.

Comments