Cara Membuat Blog Post Card Keren dengan Overflowing Image

Coretan Si Mimin, BOGOR - Halo sobat... pada kesempatan kali ini mimin akan sedikit berpindah haluan dengan membuat tutorial, cara membuat blog post card yang bisa dibilang cukup keren dengan tambahan gaya overflowing image.

Bagaimana sih cara membuat post card dengan overflow image ini, dan apa saja yang diperlukan?

Untuk cara membuatnya cukup mudah, "disini kita hanya perlu membuat dan menyediakan bahan-bahan yang diperlukan seperti: HTML, dan CSS".

Oke mimin rasa tidak perlu berlama-lama lagi, yuk langsung aja kita ke tahap cara membuat blog post card ini. Silahkan sobat perhatikan semua langkah-langkah di bawah ini:

1. Buat HTML

Untuk langkah yang pertama, disini kita coba buat HTML nya terlebih dulu. Bisa sobat lihat penampakan di bawah:

<!-- inspiration: https://dribbble.com/shots/3784003-Plant-description-page -->
<div class="wrap">
  <div class="card">
    <div class="card-pic-wrap">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-1.png" alt="A leafy plant">
    </div>
    <div class="card-content">
      <h3>A leafy one</h3>
      <p>Blossom dorset heath scabious ipsum. Grape hyacinth bee balm bird of paradise obedient plant african lily lily. Spring foxglove florist’s nighmare primrose.</p>
      <p><a href="#0">So leafy</a></p>
    </div>
  </div>
  <div class="card">
    <div class="card-pic-wrap">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1145795/plant-4.png" alt="Some pointy plants">
    </div>
    <div class="card-content">
      <h3>Some pointy ones</h3>
      <p>Florem ipsum sugarbush bloom red rose waxflower coneflower ginger. Saxifrage forget-me-not obedient plant.</p>
      <p><a href="#0">I'll take 10</a></p>
    </div>
  </div>
</div>

Silahkan sobat copy paste kode HTML di atas. Setelah itu, kita ketahap berikutnya.

2. Buat CSS

Nah, sedangkan untuk langkah yang kedua kita akan buat CSS nya. Perhatikan kode CSS berikut ini:

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}
body {
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.wrap {
  height: 100%; 
}
.card {
  display: flex;
  flex: 0 0 auto;
  background: #fff;
  max-width: 700px;
  margin: 80px 0;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.card-pic-wrap {
  border-radius: 5px 0 0 5px;
  width: 300px;
  flex: 0 0 auto;
  position: relative;
  background: linear-gradient(to bottom, #9fd483, #8dc26f);
}
.card-pic-wrap img {
    position: absolute;
    bottom: 3em;
    left: 50%;
    margin-left: -175px;
    width: 350px;
    -webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(90%, transparent), to(rgba(250, 250, 250, 0.15)));
}

.card-content {
  padding: 3em 4em 2em;
}
h3 {
  font-family: 'PT Serif', serif;
  font-weight: bold;
  font-size: 2.5em;
  margin: 0 0 1em;
}
a {
  background: #8dc26f;
  color: #fff;
  padding: 0 25px;
  height: 50px;
  font-size: 0.8em;
  letter-spacing: 1px;
  line-height: 50px;
  display: inline-block;
  border-radius: 25px;
  text-decoration: none;
  margin-top: 1.5em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,0.1);
}
  a:hover {
    background: #70a751;
  }


@media (max-width: 790px) {
  body {
    overflow-x: hidden;
  }
  .wrap {
    margin-left: 20px;
    margin-right: 20px;
  }
  .card {
    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 50px;
  }
  .card-pic-wrap {
    width: 100%;
    border-radius: 5px 5px 0 0;
  }
  .card-pic-wrap img {
      bottom: 20px;
      position: relative;
    }

  .card-content {
    padding: 2em 2em 1em;
  } 
}

Sobat bisa copy paste kembali kode CSS di atas.

Apabila semua bahan yang diperlukan sudah selesai dibuat, langkah terakhir adalah sobat coba lihat bagaimana hasilnya.

Nah, bagaimana menurut sobat? Sangat mudah bukan?

Untuk CSS nya sobat bisa ubah sesuai dengan selera masing-masing!

Demikian tutorial cara membuat blog post card keren dengan overflowing image. Semoga bermanfaat dan terimakasih.

Artikel ini pertama kali tayang di Coretan Si Mimin pada Rabu, 06/06/2023.