"Carousel Featured News Boostrap 4"
Bootstrap 4.1.1 Snippet by test9999

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3 class="text-center">has taken so much from this site, hope this one be my contribution for <small>bootsnip</small></h3> <hr> <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="http://admin.makro.id/media/post_img_sm/review-gsp-amerika-ingin-perdagangan-yang-adil-dan-saling-menguntungkan-1531307731.jpg" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/review-gsp-amerika-ingin-perdagangan-saling-menguntungkan" 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="http://admin.makro.id/media/post_img_sm/dpr-setujui-penambahan-anggaran-bp-batam-rp565-miliar-1531258457.jpeg" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/dpr-setujui-penambahan-anggaran-bp-batam-rp565-miliar" 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="http://admin.makro.id/media/post_img_sm/btn-targetkan-seribu-nasabah-valas-di-batam-1531227805.jpeg" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/btn-targetkan-seribu-nasabah-valas-di-batam" 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="http://admin.makro.id/media/post_img_sm/sistem-oss-resmi-diluncurkan-1531225964.jpg" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/sistem-oss-resmi-diluncurkan" 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="http://admin.makro.id/media/post_img_sm/grab-gandeng-samsung-telkomsel-dan-erafone-1531222875.JPG" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/grab-gandeng-samsung-telkomsel-dan-erafone" 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="http://admin.makro.id/media/post_img_sm/paket-kebijakan-ekonomi-mempermudah-izin-investasi-1530819316.jpg" alt=""> <div class="card-img-overlay d-flex linkfeat"> <a href="http://makro.id/paket-kebijakan-ekonomi-mempermudah-izin-investasi" 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="http://admin.makro.id/media/post_img_sm/bi-atur-standarisasi-qr-code-1529952479.jpg" alt=""> <div class="card-img-overlay d-flex"> <a href="http://makro.id/bi-atur-standarisasi-qr-code" 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="http://admin.makro.id/media/post_img_sm/ptsp-bp-batam-masuk-10-terbaik-di-indonesia-1531400445.jpeg" alt=""> <div class="card-img-overlay d-flex"> <a href="http://makro.id/ptsp-bp-batam-masuk-10-terbaik-di-indonesia" 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="http://admin.makro.id/media/post_img_sm/review-gsp-amerika-ingin-perdagangan-yang-adil-dan-saling-menguntungkan-1531307731.jpg" alt=""> <div class="card-img-overlay d-flex"> <a href="http://makro.id/review-gsp-amerika-ingin-perdagangan-saling-menguntungkan" 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="http://admin.makro.id/media/post_img_sm/dpr-setujui-penambahan-anggaran-bp-batam-rp565-miliar-1531258457.jpeg" alt=""> <div class="card-img-overlay d-flex"> <a href="http://makro.id/dpr-setujui-penambahan-anggaran-bp-batam-rp565-miliar" 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> <h5 class="text-center">Visit My Site : <a href="http://makro.id/" class="btn btn-outline-primary" target="_blank">makro.id</a></h5> </div>
/*HYPER LINK*/ a:hover{ } a, a:focus , a:hover{ text-decoration: none; color: inherit; } a:hover, .btn{ outline:none!important; } /*ROUNDED CORNER*/ *{ -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } /*CATEGORIES BADGE*/ .badge { font-weight: 600; font-size: 13px; color: white; background-color: #289dcc; } /*FEATURED*/ .mg-2, .mg-4{ margin-left:-20px; } .linkfeat{ background: rgba(76,76,76,0); 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-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,0)), color-stop(49%, rgba(48,48,48,0)), color-stop(100%, rgba(19,19,19,1))); 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%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); }
//FEATURED HOVER $(document).ready(function(){ $(".linkfeat").hover( function () { $(".textfeat").show(500); }, function () { $(".textfeat").hide(500); } ); });

Related: See More


Questions / Comments: