"Magazine Style Blog Section"
Bootstrap 4.1.1 Snippet by pineapp1es

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-6 col-lg-6 py-0 pl-3 pr-1 featcard"> <div id="featured" class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/f00" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Ekspor</span> <h4 class="card-title">Review GSP: Amerika Ingin Perdagangan Saling Menguntungkan</h4> <p class="textfeat" style="display: none;">makro.id – Duta Besar Amerika Serikat untuk Indonesia Joseph R. Donovan menegaskan, langkah pemerintah Amerika Serikat meninjau ulang pemberian Generalized System od Preferenes (GSP) akan menguntungkan kedua belah pihak. Menurut Donovan,</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/f60" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Pertumbuhan Ekonomi</span> <h4 class="card-title">DPR Setujui Penambahan Anggaran BP Batam Rp565 Miliar</h4> <p class="textfeat" style="display: none;">makro.id - Dewan Perwakilan Rakyat (DPR) menyetujui penambahan anggaran Badan Pengusahaan (BP) Batam Rp565 miliar. Dengan penambahan anggaran di tahun 2019 tersebut diharapkan dapat mendorong percepatan pembangunan Kota Batam. Anggota Komisi</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/ff0" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Perbankan</span> <h4 class="card-title">BTN Targetkan Seribu Nasabah Valas di Batam</h4> <p class="textfeat" style="display: none;">makro.id - Bank Tabungan Negara (Persero) resmi merilis tabungan valuta asing (valas) di Batam. Sebagai daerah yang berbatasan langsung dengan Singapura dan sebagai pintu gerbang wisatawan mancanegara (wisman), transaksi valas</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/0f0" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Industri</span> <h4 class="card-title">Sistem OSS Resmi Diluncurkan</h4> <p class="textfeat" style="display: none;">makro.id - Menteri Koordinator Bidang Perekonomian Darmin Nasution bersama dengan para menteri dan kepala lembaga terkait meresmikan penerapan Sistem Online Single Submission (OSS). Layanan Perizinan Berusaha Terintegrasi Secara Elektronik (PBTSE), yang</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/00f" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Nusantara</span> <h4 class="card-title">Grab Gandeng Samsung, Telkomsel, dan Erafone</h4> <p class="textfeat" style="display: none;">:: Luncurkan Program Ponsel Cerdas untuk Pengemudi Batam - Grab menjalin kemitraan strategis dengan tiga perusahaan terkemuka di Indonesia yaitu Telkomsel, Samsung, dan Erafone terkait program kepemilikan ponsel cerdas khusus untuk</p> </a> </div> </div> </div> <div class="carousel-item"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/f0f" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="#" class="align-self-end"> <span class="badge">Finansial</span> <h4 class="card-title">Paket Kebijakan Ekonomi Mempermudah Izin Investasi</h4> <p class="textfeat" style="display: none;">makro.id– Paket kebijakan ekonomi dinilai dapat memberikan kemudahan dalam pengurusan perizinan berinvestasi dan memberikan efek yang cukup signifikan kepada investor. Ketua Umum Himpunan Kawasan Industri (HKI) Sanny Iskandar menyatakan saat ini</p> </a> </div> </div> </div> </div> </div> </div> <div class="col-6 py-0 px-1 d-none d-lg-block"> <div class="row"> <div class="col-6 pb-2 mg-1 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/d00" alt=""> <div class="card-img-overlay d-flex"> <a href="#" class="align-self-end"> <span class="badge">Finansial</span> <h6 class="card-title">BI Atur Standarisasi QR Code</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-2 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/0d0" alt=""> <div class="card-img-overlay d-flex"> <a href="#" class="align-self-end"> <span class="badge">Industri</span> <h6 class="card-title">PTSP BP Batam Masuk 10 Terbaik di Indonesia</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-3"> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/dd0" alt=""> <div class="card-img-overlay d-flex"> <a href="#" class="align-self-end"> <span class="badge">Ekspor</span> <h6 class="card-title">Review GSP: Amerika Ingin Perdagangan Saling Menguntungkan</h6> </a> </div> </div> </div> <div class="col-6 pb-2 mg-4 "> <div class="card bg-dark text-white"> <img class="card-img img-fluid" src="https://i.twic.pics/v1/placeholder:750x500:fff/00d" alt=""> <div class="card-img-overlay d-flex"> <a href="#" class="align-self-end"> <span class="badge">Pertumbuhan Ekonomi</span> <h6 class="card-title">DPR Setujui Penambahan Anggaran BP Batam Rp565 Miliar</h6> </a> </div> </div> </div> </div> </div> </div> </div>
* { margin: 0 auto; padding: 0; color: white; gap: 0; } a, a:focus , a:hover { text-decoration: none !important; color: white; } a:hover, .btn { outline: none !important; } /*CATEGORIES BADGE*/ .badge { font-weight: 600; font-size: .9rem; color: white; background-color: #00f; } .card-img { margin: 0; padding: 0; border-radius: 0 !important;} /*FEATURED*/ .mg-2, .mg-4 { margin-left: -20px; } .linkfeat { background: rgba(76,76,76,0) black; background: -moz-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%); background: -webkit-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%); background: -o-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%); background: -ms-linear-gradient(top, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%); background: linear-gradient(to bottom, rgba(76,76,76,0) 0%, rgba(48,48,48,0) 49%, rgba(19,19,19,1) 100%); }
$(document).ready(function(){ $(".linkfeat").hover( function () { $(".textfeat").show(500); }, function () { $(".textfeat").hide(500); } ); });

Related: See More


Questions / Comments: